[타입스크립트]타입 추론(Inference)과 타입 단언(Assertions)

타입 추론

명시적으로 타입 선언이 되어있지 않은 경우,  타입스크립트는 우리의 코드를 읽고 분석하여 타입을 추론하여 제공한다! 

 

타입스크립트가 타입을 추론하는 경우는

1. 초기화된 변수
2. 기본값이 설정된 매개변수
3. 반환 값이 있는 함수

 

let num = 12;
num = 'Hello type!'; // TS2322: Type '"Hello type!"' is not assignable to type 'number'.

// 초기화된 변수 `num`
let num = 12;

// 기본값이 설정된 매개 변수 `b`
function add(a: number, b: number = 2): number {
  // 반환 값(`a + b`)이 있는 함수
  return a + b;
}

 

 

---

타입 단언

타입스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우에 더 이상 추론하지 않도록 지시하는 것

=>?? 이해가 가지 않는다

 

즉, 타입 단언은 프로그래머로 하여금 값의 타입을 지정하게 하고 컴파일러로 하여금 추론하지 않게 지시하는 것!! 

 

 

 

function someFunc(val: string | number, isNumber: boolean) {
  // some logics
  if (isNumber) {
    val.toFixed(2); // Error - TS2339: ... Property 'toFixed' does not exist on type 'string'.
  }
}

우리는 isNumber가 true일 경우 val이 number이고tofixed가 실행된다는 것을 알고 isSumber가 false이면 val이 string임을 알 수 있지만 타입스크립트는 위를 이해할 수 없다..! 

=> 왜 이해 못하지?....,,?

 

만약 이 코드에서 val이 string일경우에 toFiexed를 사용할 수 없기때문에 오류를 반환한다

따라서 우리는 위 코드를 아래처럼 변경해주어야 한다.

 

function someFunc(val: string | number, isNumber: boolean) {
  // some logics
  if (isNumber) {
    // 1. 변수 as 타입
    (val as number).toFixed(2);
    // Or
    // 2. <타입>변수
    // (<number>val).toFixed(2);
  }
}

 

 

추가적으로 하나의 예시를 더 보자!

let foo = {};
foo.bar = 123; // 오류: 속성 'bar'가 `{}`에 존재하지 않음
foo.bas = 'hello'; // 오류: 속성 'bar'가 `{}`에 존재하지 않음

foo는 빈객체로 타입 추론이 되었다. 따라서 bar나 bas같은 속성을 추가할 수 없다. 

이러한 오류를 as Foo라는 타입 표명을 사용하여 간단히 해결 가능하다.

 

interface Foo {
    bar: number;
    bas: string;
}
let foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

 

 

++ as 타입 표명은 원래 <>로 표현했다.

let foo: any;
let bar = <string> foo; // 이제 bar의 타입은 "문자열"입니다

둘 다 사용가능하긴 하지만 as 표명을 더  권장한다!

왜냐! <>는 아래와 같이  JSX에서 문법적으로 모호한 경우가 발생하기 때문!

var foo = <string>bar;
</string>

 

 

++ 타입표명은 순수하게 컴파일 시간에 속해있고 코드가 어떤 식으로 분석되길 원하는지 컴파일러에게 힌트를 제공하는 수단임!! 

 

 

 

 

 

 

으악 어렵다잉..

 

---

 

 

출처

https://www.tutorialsteacher.com/typescript/type-assertion

Type Assertion in TypeScript

https://edu.goorm.io/learn/lecture/22106/%ED%95%9C-%EB%88%88%EC%97%90-%EB%B3%B4%EB%8A%94-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/lesson/1042563/%ED%83%80%EC%9E%85-%EB%8B%A8%EC%96%B8-assertions

goorm