TypeScript / 타입 단언 정리

 

 

개발자가 직접 타입스크립트 컴파일러에게 타입을 지정해주는 것이다.

그럼 타입스크립트 컴파일러는 아 개발자가 나보다 더 똑똑하니까 이게 답이구나! 라고 믿게 해주는 것이다.

단언은 당하는 타입이 가하는 타입의 슈퍼타입이거나 서브타입이어야만 해당 기능을 사용할 수 있다.

(동등한 레벨의 타입이라면 오류가 발생한다.)

 

const value: any = "hello";

const length = (value as string).length;

 

- 컴파일러는 value의 타입이 any라서 아무것도 모른다.

- 하지만 개발자는 이것이 문자열임을 알고 있기 때문에, 직접 타입을 알려주는 것이다.

 

왜 타입 단언이 필요할까?

 

1. DOM 조작 시

 

const e1 = document.querySelector("#title") as HTMLHeadingElement;

el.innerText = 'Hello';

 

- DOM API는 기본적으로 Element  |  null을 반환하기 때문에, 실제 타입을 지정해줘야 

  오류가 발생하지 않게 안정적으로 작업이 가능하다.

 

2. any 타입을 구체적으로 변환할 때

 

let data: any = "text";

let upper = (data as string).toUpperCase();

 

3. 타입 좁히기 대신 확신이 있을 때

 

function getValue(): string | number {

   return "hello";

}

 

const v = getValue() as string;

 

타입 단언의 위험성

 

const num = "hello" as number; // 컴파일 에러 X, 런타임에서 오류가 발생한다.

// 컴파일러는 아 개발자가 똑똑하니까 문자열이라고 보여도 자동추론을 하지 않는다.

 

as const (리터럴 단언)

 

const a = "hello" as const // 타입 : hello

 

const user = {

  name: "철수", // readonly name: "철수";

  age: 20 // readonly age: 20;

} as const;

 

- 객체에서 리터럴 단언을 사용한다면, 값이 readonly로 고정된다.

- 리터럴 타입으로 취급된다.

 

Non-null 단언 (!)

 

const btn = document.querySelector("button")!;

btn.innerText = "Click!";

 

- 컴파일러는 btn이 null일 수도 있다고 경고를 한다.

- !를 붙이면 절대 null이 나올 수 없다고 개발자가 컴파일러에게 단언해주는 것이다.

- 하지만 DOM 요소가 실제로 존재하지 않으면 런타임 오류가 발생한다.