[TIL_2023.12.07] Node.JS - 타입스크립트

타입스크립트란?

• 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있음. 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 하는데 이 변환 과정을 컴파일(complile) 이라고 부름

타입스크립트를 사용하는 이유?

• 에러의 사전 방지

  • 예를들어 아래와 같은 코드가 있다고 치자. 숫자를 sum에 인자로 넣으면 문제가 없는데 sum('10', '20') 처럼 '' 안에 숫자를 넣어 입력하게 되면 원하는 30이 아니라 '1020'이라는 문자열이 되어버린다.

    function sum(a, b) {
    return a + b;
    }
    
    sum(10, 20); // 30
    sum('10', '20'); // 1020

  • 그런데 아래와 같이 타입스크립트를 통해 타입을 명시하게 되면 에러가 표시되어 의도하지 않은 오류를 예방할 수 있게 된다.

    function sumTs(a: number, b: number) {
    return a + b;
    }
    sumTs('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.
    		```

• 코드 가이드 및 자동 완성(개발 생산성 향상)

타입스크립트를 사용 방법?

1. String Type

   // 문자타입 - 타입추론 : 변수 선언시 사용한 타입으로 추론되어 다른 타입으로 재할당 시 오류발생
   let a = '안녕하세요'
   a = '반갑습니다' 
   a = 3 //  다른 타입을 넣게되면 에러 발생!
   
   // 문자타입 - 타입명시
   let b: string = '반갑습니다.'
   b = '반가워요!!'
   b = 10 //  숫자 타입 불가능!
   
   // 타입 명시가 필요한 상황 : 추후 타입 변경 예상시 '|' 를 사용해 미리 명시해둠 
   let c: string | number = 1000
   c = '1000원'

2. Nmber Type

   let d: number = 10
   d = "안녕하세요!!" //  문자 타입 불가능!
   d = "33" // 문자 타입 불가능!

3. Boolean Type

   
   let e: boolean = true
   e = 11 // 숫자 타입 불가능!
   e = false
   // '' 안에 공백 포함 한글자라도 들어가게 되면 true로 인식하니 주의!
   eee = "false" // true로 작동함 

4. Array Type

   // 아래 둘 중 하나로 사용 가능
   let arr: number[] = [1,2,3]; // 1번 
   let arr: Array<number> = [1,2,3]; // 2번
   
   // 배열타입
   
   // 숫자
   let f: number[] = [1, 2, 3, 4, 5]
   f = ["철수", "영희", "훈이"] // 에러, 문자 타입 불가능!
   
   // 문자
   let g: string[] = ["철수", "영희", "훈이"]
   
   // 숫자, 문자 혼합
   let h: (number | string)[] = ["철수", "영희", "훈이", 10] // 타입을 추론해서 어떤 타입을 사용하는지 알아보기!!
   
   let mymoney: number[] | string[] = [1000, 2000, 3000]
   mymoney = ["1000원", "2000원", "3000원"]

5. Object Type

• Object(객체)의 타입을 지정할 때는 interface를 사용

• interface는 상호 간에 정의한 약속 혹은 규칙을 의미.

• 타입스크립트에서의 interface는 보통 아래 범주에 대해 약속을 정의함

  • 객체의 스펙(속성과 속성의 타입)
  • 함수의 파라미터
  • 함수의 스펙(파라미터, 반환 타입 등)
  • 배열과 객체를 접근하는 방식
  • 클래스

  // 타입 정의
  interface IProfile {
      name: string
      // age: number // 1번 
      age: number | string // 2번
      school: string
  }
  
  // 객체 생성
  let profile: IProfile = {
      name: '엘사',
      age: 12,
      school: "겨울왕국 초등학교"
  }
  profile.age = "13살" // 1번의 경우 에러, 2번의 경우 정상작동
  profile.favoriteFood = '토마토스튜' // 타입을 정한게 없어 에러남 -> 아래의 코드 처럼 변경해야함 

  // 타입 정의
  interface IProfile {
      name: string
      age: number | string
      school: string
      favoriteFood: string 
  }
  
  // favoriteFood 를 쓸지 안쓸지 불명확하다면? 
  interface IProfile {
  name: string
  age: number | string
  school: string
  hobby?: string // ? 표시 해주면 됨
  }

6. Function Type

• 함수 타입에서는 매개변수 받는 위치에서 타입을 필수로 지정해줘야함

• 또한 실행도 지정해준 타입과 동일하게 작성해서 실행시켜야 함

• return 값에 대한 타입도 지정해줄 수 있음 -> 매개변수 괄호 뒷 부분에서 타입 지정 가능

  // 함수타입 1
  // add(파라미터) ': number' -> 리턴타입 지정하는 코드
  function add(num1: number, num1: number): number {
  	return num1 + num1
  // return "안녕하세요!!" //  return 값이 문자 타입이기에 불가능!
  }
  
  const result = add(1000, 2000)
  
  // 함수타입 2
  function add2(num1: number, num1: number, unit: string): string {
  	return num1 + num2 + unit
  }
  
  let result2 = add2(1000, 2000, "원") // result의 타입은 string이 되야함