front-end/TypeScript

Typescript Aliases, readonly, Literal, as const

Hoon0211 2024. 2. 22. 09:30
728x90

1.  Aliases

1. type 타입변수명 = 타입종류

- 타입을 변수 처럼 만들어 쓰는 문법입니다.

type home = string | number | undefined;
let 집 :home;

 

2. object 타입도 가능합니다.

type home = {
  name : string,
  modelnum : number,
}

let teacher :home = { name : 'TV', modelnum : 20240222 }

 

3. type 키워드는 재정의가 불가능합니다.

type name = string;
type name = number; // 불가능

 

4. type은 합치는 게 가능합니다.

type name = string;
type age = number;
type newOne = name | age;

 

 

2. readonly

1. const 변수는 재할당이 불가능합니다.

const tv = 'OLEDTV'
tv = 'QLEDTV' 
// 에러 발생

 

2. object 자료의 경우 변경이 가능합니다.

const TV  = {
  name : 'OLEDTV'
}
TV.name = 'QLEDTV';
//const 변수지만 에러가 발생하지 않습니다.

 

3. 특정 속성을 변경 불가능하게 잠가주는 역할을 합니다.

const TV  = {
  readonly name : 'OLEDTV'
}
TV.name = 'QLEDTV';
//에러가 발생합니다.

 

 

3. Literal

1. 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입입니다.

let direction : 'left' | 'right';

 

2. 함수도 가능합니다.

function 함수(a : '가위' | '바위' | '보') : ('가위'|'바위'|'보')[] {
 return ['가위','보'] 
}

 

3. const와 유사하지만 업그레이드 버전이며, 타입스크립트에서만 가능합니다.

 

 

4. as const

1. 타입을 object의 value로 변경해 줍니다.

2. object안에 있는 모든 속성을 readonly로 변경해 줍니다.

var TV = {
  name : 'OLEDTV'
} as const;

function LG(a : 'OLEDTV') {
}

LG(TV.name)


// as const가 없는 경우 에러가 발생을 합니다.
// name : 'OLEDTV'이 string 타입이기 때문에
// a : 'OLEDTV' OLEDTV 타입이기 떄문입니다.

 

728x90