[Typescript] 좀 더 알아보기(Type Assertion, Index Signature)

 

1. Type Assertion

- 타입스크립트가 추론하지 못하는 타입을 as keyword를 통해 명시해주는 것

- Type casting: 데이터의 타입을 변환

- Type assertion: 데이터의 타입을 명시

 

Type Assertion의 두 가지 형태

1. As

let someValue: unknown = 'this is a string';
let strLength: number = (someValue as string).length;

2. Angle Bracket

let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

- JSX에서는 꺾쇠괄호를 통한 Type Assertion은 태그와 혼동되기 때문에 잘 사용하지 않는다.

 

타입 선언 vs 타입 단언

타입 단언: as Penguin만 보고 Penguin 타입으로 인식하여, 빈 객체임에도 에러를 뱉지 않음

타입 선언: 객체 프로퍼티를 모두 채우도록 강제하기 때문에 실수를 저지를 위험이 낮음

type Penguin = {
  walk: () => void;
  swimming: () => void;
};

const penguin = {} as Penguin;    // 타입 단언 😫

const penguin: Penguin = {        // 타입 선언
  walk() {
    console.log('뒤뚱뒤뚱');
  },
  swimming() {
    console.log('슈욱');
  },
};

 

 

2. Index Signature

Javascript Index Signature

- 객체의 특정 value에 접근할 때 그 value의 key를 문자열로 인덱싱해 참조하는 방법

- value의 key인 ‘breed’ 문자열로 객체의 value ‘puddle’에 접근

const dog = {
  breed: 'puddle',
  name: 'Kumuri',
  bark: () => console.log('멍멍'),
};

dog['breed'];

Typescript Index Signature

- TypeScript Index Signature: 자바스크립트의 인덱스 시그니처에 대한 타입을 지정해주는 것

- 객체의 프로퍼티들을 명확히 알 수 없을 때 사용한다.

type ArrStr = {
  [key: string]: string | number;
  [index: number]: string;
  
  // [field: string]: string; 
  // Duplicate index signature for type 'string'
  
};

const a: ArrStr = {};
a['str'];

- key: 자리 표시 용도. 이름은 어떻게 짓든 상관없다.

- key가 string인 인덱스 시그니처는 하나만 존재 가능하여, filed를 한 번 더 정의하려고 하면 타입 에러가 발생한다.

- empty object일 때 인덱스 시그니처로 참조하려 해도 타입 에러가 나지 않는다.

- key마다 다른 타입을 가질 수 없음 (key 타입이 string 이면, 무조건 string 또는 number 타입

- 타입에 유연함을 제공하는 대신 키 이름을 잘못쓰는 등의 휴먼 에러를 범할 수 있다. 따라서 Index signature는 런타임에 객체의 프로퍼티를 알 수 없는 경우에만 사용해야한다.