[TypeScript] 타입 단언, 좁히기

출처 : 이정환의 한 입 크기로 잘라먹는 타입스크립트

타입 단언 ( Assertion )

타입 스크립트에서 " 이 변수는 내가 원하는 타입이야! " 라고 선언하는 방법. 

`값 as 타입` 형식으로 사용한다. 

 

1. 기본 타입 단언 

 

type Person = {

  name: String;

  age: number;

};

let person = {} as Person; // person을 Person 타입이라고 단언

person.name = "땅콩하우스";

person.age = 27;

 

 

빈 객체 `{}` 를 `Person` 타입이라고 단언했지만, 속성을 직접 추가해야 정상적으로 사용 가능함.

---

2. 타입 단언의 규칙

`A as B` 사용 시, A가 B의 슈퍼타입이거나 서브타입이어야 함.

-> 즉 ,관련 없는 타입끼리는 단언이 불가능하다.

 

let num1 = 10 as never; 

let num2 = 10 as unknown;

let num3 = 10 as unknown as string; // 다중 선언 이라고 하는데 거의 사용 안함.

 

다중 단언 (unknown을 거쳐서 string으로 변경) 은 위험하므로 웬만하면 사용하지 말자!

---

3. `Const` 단언

 

let num4 = 10 as const; // num4의 값이 절대 변하지 않음

let cat = {

  name: "야옹이",

  color: "yellow",

} as const;        // 모든 속성이 읽기 전용 (`readonly`) 이 됨.

 

 `as const`를 사용하면 값이 상수처럼 고정됨! 변경 불가능한 값을 만들고 싶을 때 사용하면 좋음.

---

4. `Non-Null` 단언 (! 연산자)

 

type Post = {

  title: string;

  author?: string;

};

let post: Post = {

  title: "게시글1",

  author: "땅콩하우스",

};

const len: number = post.author!.length; // `author`가 절대 null/undefined가 아니라고 단언

// 물음표는 옵셔널 체이닝 널이거나 언디파인일 경우 "." 접근자로 접근하면 오류발생하니 "?" 을 붙여주는 연산자.

// 느낌표로 바꿔주면 Non Nulll 단언 연산자. NULL 이거나 UNDEFINED가 아닐거라고 얘기해주는 방식.

 

 

 

---

 

타입 좁히기 (Type Narrowing)

"넓은 타입" 에서 "특정 타입" 으로 조건문을 통해 좁혀가는 과정을 말함.

-> 이 과정에서 사용하는 조건문을 타입 가드 ( Type Guard ) 라고 한다.

 

타입 좁히기 예제 

 

 type Person = {

     name : string;

     age :  number;

 };

 

 function func(value: number | string | Date | null | Person) {

 

 

 

 

 // 타입 가드 사용

   if (typeof value === "number") {

     console.log(value.toFixed()); // 조건문이 number를 지정해줬기 때문에 number타입이 됨.

 

   } else if (typeof value === "string") {

     console.log(value.toUpperCase()); // 조건문이 string을 지정했기 때문에 string타입이 됨.

 

   } else if ( value instanceof Date) {  // 왼쪽에 있는 값이 Date 객체인지 확인하는 instanceof 연산자.

     console.log(value.getDate());

 

   // else if (typeof value === "object") {  // object 라고 해 놓으면 null도 통과를 할 수 있음 그렇기 때문에 typeof 사용 불가.

    //console.log(value.getTime());

 

   // } else if ( value instanceof Person ) { // instanceof 는 클래스가 아닌 객체타입은 활용할 수 없다.

 

   } else if ( value && "age" in value) {  

     console.log(`${value.name}은 ${value.age}살 입니다.`);

   }

   

 }

 

주의할 점.

1. `typeof` 검사로 `null`을 체크해야 한다.

• `typeof null`은 "object"라서 그냥 `typeof value === "object"` 하면 `null`도 통과한다.

2. `instanceof`는 클래스에만 사용 가능하다.

• `instanceof`는 클래스 기반 객체에서만 동작함.
• 인터페이스나 타입(alias)에는 사용 불가함.