🏷 Typescript

const assertion

웹 리뉴얼을 하며 기존 컴포넌트를 수정 및 리팩토링하는 과정에서 기존 'xsmall' | 'small' | 'medium' | 'large'와 같이 사용했던 union 타입 사용을 다음과 같이 변경하였다.

이는 p tag 사이즈에 대한 타입이다.

const PSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
export type PSize = typeof PSizes[number];

export const pSize2Rem = (size: PSize) =>
  rem(
    {
      xsmall: 11,
      small: 13,
      medium: 15,
      large: 17,
      xlarge: 23,
    }[size]
  );

const assertions: as const 란??

• as const : 타입스크립트 3.4에 추가된 기능인 const assertions
• 새로운 리터럴 타입을 만들 때 사용할 수 있다.

[let 변수인 경우]

let str = "seoyoung"
// 타입: 'string'(let은 변경될 여지가 있으므로 str을 string으로 추론한다.)
let str_c = "seoyoung" as const
// as const라 지정함으로써 str 타입은 'seoyoung'이 된다.
str_c = 'hi' // 따라서 'seoyoung'이 아닌 다른 값을 할당하려 할때 타입스크립트 에러가 난다.

[const 변수인 경우]

const str = "seoyoung"
// 타입: 'seoyoung' (const는 변경되지 않으므로 str을 'seoyoung'타입으로 추론한다.)
const str = "seoyoung" as const
// 이미 const변수에도 의도한 대로 타입을 추론하므로 의미가 없다

// 이번엔 배열인 경우를 살펴보자
const 평일 = ['월', '화', '수', '목', '금']	//	'string[]' 타입으로 추론
평일.push('토') // 따라서 평일에는 다른 string을 추가할 수 있다.

const 평일2 = ['월', '화', '수', '목', '금'] as const
// const 평일2: readonly ["월", "화", "수", "목", "금"]
// 즉, 평일2는 readonly 튜플이 된다. (object인 경우도)
평일2.push('토') // 따라서 평일에 다른 값을 추가하려할때 string이더라도
// Property 'push' does not exist on type 'readonly ["월", "화", "수", "목", "금"]'.
// 위와 같은 타입 에러가 발생한다.

• jsx 파일에서는 대괄호 assertions구문도 활용할 수 있다.

let str = <const>"seoyoung"
const arr = <const>['월', '화', '수', '목', '금']
const obj = <const>{ name: "seoyoung" };

• 간단한 리터럴 표현식(enum members, string, number, boolean, array, or object literal)에만 적용할 수 있다.

typeof PSize[number] 란??

• const assertions을 이용해서 배열 값으로 구성된 union 타입 만들면 아래와 같이 타입가드도 사용할 수 있게되고, 여러모로 장점이 있음

export function isKnownColorGroup(str: string): str is KnownColorGroup {
  return knownColorGroupNames.includes(str as KnownColorGroup);
}

더 읽어보면 좋은 글

타입스크립트 - 배열의 값을 타입(union)으로 바꾸기(const assertions)

enum 대신 object를 generic을 이용하여 union type으로 변경하기