JavaScript 보다 좀 더 컴퓨터와 대화를 하는 느낌을 받았고,

TypeScript 를 사용하는 이유는 데이터 타입의 안정성과 런타임 에러를 줄일 수 있다는 이점이 있다.

• Type Checker

  • JavaScript

    let a = "hello" // 타입 추론을 통해 string 을 알아낸다.
    

  • TypeScript

    let a: string = hello // 데이터 타입이 string 라는 것을 명시적으로 표현
    let b: number[] = [] // 배열 안의 데이터 타입이 number 라는 것을 명시적으로 표현
    

• Alias(별칭)

  • TypeScript 에서 배열 또는 객체를 동일한 데이터 타입으로 반복한다고 했을 때 매번 데이터 타입을 입력한다면 굉장히 번거로운 수고를 해야 하는데, 이러한 문제를 해결할 때 사용하는 것

    // Alias ( Object )
    type Player = {
      name: string;
      age?: number;
    };
    
    const arr1: Player = {
      name: 'Luna',
      age: 33,
    };
    
    const arr2: Player = {
      name: 'Cat',
    };
    
    //                   ↓ ↓ ↓ 함수에 들어가는 변수의 데이터타입
    function playerMaker(name: string): Player {
      return { name }; //               ↑ ↑ ↑ 함수의 데이터타입 또는 형태
    }
    

  • 주의할 점은 Alias 를 작성할 때 맨 앞 철자를 대문자로 안쓴다고 에러가 발생하지는 않는다. 하지만, 맨 앞 철자를 대문자로 쓰는 것이 대중적인 컨벤션이고, 이렇게 써야 하는 이유는 Alias 가 어떤 것인지 가독성을 높이고 시각적으로 구분하기 위함이다.

• readonly

  • 속성이나 변수를 읽기 전용으로 만들어, 해당 값이 변경되지 않도록 한다.

    // readonly
    const arr: readonly number[] = [1, 2, 3, 4];
    arr.push(4); // push error`s reason is 'readonly'
    

• Tuple

  • 고정된 개수의 요소로 구성된 배열로, 각 요소의 데이터 타입이 미리 정해져 있다.

    // 숫자와 문자열을 가지는 Tuple
    const person: [string, number];
    
    person = ['Luna', 32];
    
    // 잘못된 값을 할당한 경우 (타입 오류)
    person = [30, 'John']; // 숫자와 문자열이 반대로 할당됨
    
    // 추가 요소를 할당하려고 할 때 (타입 오류)
    person[2] = true; // Tuple에 정의된 개수 이상의 요소를 할당할 수 없음
    

• unknown

  • 전달 받을 데이터의 타입을 미리 알기 어려울 때 사용한다.

  • 또한, 데이터 타입을 선언한 것 같지만 사실상 데이터 타입이 뭔지 모르기 때문에 if 로 검증

    let a: unknown;
    
    if (typeof a === 'number') {
      let b = a + 1;
    } else if (typeof a === 'string') {
      let b = a.toUpperCase();
    }