🧩 Contents Table

타입이 결정되는 방식

TypeScript의 타입 시스템은 집합론을 기반으로 함.

컴파일 타임에서 타입을 결정할 수 있는 방식은 3가지가 있음.

01. Type Annotation 타입 주석

• 값의 타입을 명시적으로 지정하는 방식

• 값을 할당하면서 타입 주석을 달면, 컴파일러가 잘못된 타입에 에러를 발생.

  const a: string = "zzin";
  const b: string = 10;
  // ❌ Type 'number' is not assignable to type 'string'.
  

02. Type Inference 타입 추론

• 타입스크립트 컴파일러가 코드 문맥을 바탕으로 값의 타입을 자동으로 결정하는 방식.
• 명시적으로 타입을 지정하지 않아도 컴파일러가 타입을 추론.

03. Type Assertion 타입 단언

• 개발자가 직접 특정 타입으로 명시하는 방식

• 컴파일러가 타입을 정확히 추론하지 못할 때 컴파일러가 해당 타입으로 강제로 인식하도록 함

  //nameElem 을 추론하면 HTMLElement | null
  const nameElem = document.getElementById("username");
  
  //타입단언방식1: as 키워드
  const nameElem = document.getElementById("username") as HTMLElement;
  
  //타입단언방식2: <>구문 | `.tsx`파일에서는 <>구문을 JSX 구문으로 인식하므로 as 사용 권장
  const nameElem = <HTMLElement>document.getElementById("username");
  

• 타입 단언 사용 시 집합 관계에 유의할 것: 덜 구체적이거나, 더 구체적인 것으로 타입 단언 가능

  • 더 구체적인 타입으로 좁히기 Type Narrowing: 상위타입에서 하위타입으로

    //상위타입 unknown (모든 타입의 상위 타입)
    const value: unknown = "hello";
    //하위타입인 string으로 좁힘
    const str = value as string; 
    

  • 덜 구체적인 타입으로 넓히기 Type Widening: 하위타입에서 상위타입으로

    //하위타입 string
    const str: string = "hello";
    //상위타입 unknown으로 넓힘
    const value = str as unknown;
    

타입 단언 사용 방법