[TS] Literal Type

Chanki Hong·2023년 4월 1일
0

TypeScript

목록 보기
5/9
post-thumbnail

Literal Type

  • 변수가 미리 선정된 데이터만 가질 수 있게 함.
  • 변수에 들어올 값을 엄격하게 관리.
  • 자동완성 이용 가능.
// 접니다 변수에 탈모 또는 솔로 만 들어올 수 있음.

let 접니다: '탈모' | '솔로';
  • 함수에도 이용 가능.
// 'hello' 만 파라미터로 받을 수 있고,
// 1 또는 0 만 retrun 할 수 있는 함수.

function 함수(a: 'hello'): 1 | 0 {
  return 1;
}
함수('hello');
// 가위, 바위, 보 중 1개를 인풋으로 받고,
// 가위, 바위, 보만 들어올 수 있는 배열을 return 하는 함수.

function 예제(x: '가위' | '바위' | '보'): ('가위' | '바위' | '보')[] {
  return ['가위', '바위'];
}
  • Literal Type 은 선정한 자료만 담을 수 있는 const 변수의 확장의 개념으로 볼 수 있음.

문제점

  • Literal type은 값을 의미하는 것이 아닌, 말그대로 type을 의미함.
  • 아래의 내함수()의 파라미터 astring type 중 'kim' 이라는 값을 의미하는 것이 아니고, kim type을 의미함.
function 내함수(a: 'kim') {}
내함수('kim');

const 자료 = {
  name: 'kim', // string type
};

내함수(자료.name); // 오류 발생.

해결1

  • object 타입 지정.
const 자료2: { name: 'kim' } = {
  name: 'kim',
};

내함수(자료2.name);

해결2

  • assertion.
const 자료3 = {
  name: 'kim' as 'kim',
};

내함수(자료3.name);

해결3

  • as const 키워드 이용.
const 자료4 = {
  name: 'kim',
} as const;

내함수(자료4.name);
  • 객체의 value값 그대로를 타입으로 지정.
  • readonly 설정으로 참조값 수정 불가.

0개의 댓글