[Typescript] type annotation | type inference | type assertion

 

1. type annotation

type annotation은 개발자가 타입을 타입스크립트에게 직접 말해주는 것을 의미한다.

const name: string = '홍길동'; // 개발자가 string으로 타입을 지정

 

 

2. type inference

type inference는 타입스크립트가 알아서 타입을 추론하는 것을 의미한다.

const name = '홍길동' // 변수 선언과 동시에 초기화할 경우에는 typescript가 초기화 값으로 타입 추론

 

+ typescript가 타입 추론을 할 수 없는 경우에는 type annotation을 꼭 해줘야하는 경우이다.

1) any 타입 리턴

typescript가 추론할 수 없는 초기화 값은 any로 정의되기 때문에 직접 type annotation을 해야한다.

const response = '{"id":1, "result":10}';
const data = JSON.parse(response);	// 이 때, data는 any 타입으로 정의됨
console.log(data); // data = {id: 1, result: 10} (실제로는 object type)

 

 

2) 변수 선언 후 나중에 초기화

변수 선언과 동시에 초기화하면 타입을 추론하지만, 나중에 값을 초기화하면 추론을 못한다.

let name;	// let name: any
name = '홍길동'; // let name: any

 

 

3) 변수에 대입될 값이 일정하지 않은 경우

변수에 여러 타입이 지정되어야할 경우 직접 annotation을 해야한다.

let 변수명 : boolean | number = false;

 

 

 

3. type assertion

TypeScript에서는 시스템이 추론 및 분석한 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있습니다. 이때 "타입 표명(type assertion)"이라 불리는 메커니즘이 사용됩니다. TypeScript의 타입 표명은 프로그래머가 컴파일러에게 내가 너보다 타입에 더 잘 알고 있고, 나의 주장에 대해 의심하지 말라고 하는 것과 같습니다.
- "typescript-deep-dive"

type assertion을 사용하면 개발자가 값의 type을 설정하고 컴파일러에 이를 유추하지 않도록 지시할 수 있다. typescript의 추론보다 변수의 유형에 대해 더 잘 이해하고 있을 때 사용한다.

interface Foo {
  bar: number;
  bas: string;
}

// 아래의 경우, 약속한 속성을 추가하지 않아도 type 에러 없음
const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hi';

// 아래의 경우, JSX 문법과 겹쳐서 React에서는 사용하지 않는게 좋다.
// as Foo와 비슷한 기능에 자동완성을 지원한다.
const foo = <Foo>{
	...
}

// 아래의 경우, 초기화 값에 bar와 bas라는 프로퍼티를 입력하지 않으면 type 에러 발생
// 미리 정해진 타입을 지킬 수 있다는 장점 있다.
const foo:Foo = {
	bar : 123,
    bas : 'hi',
};

 

 

 

 

---

참고자료

https://radlohead.gitbook.io/typescript-deep-dive/type-system/type-assertion

타입 표명(Type Assertion) - TypeScript Deep Dive