본문 바로가기

TypeScript/기초

[TypeScript] type 키워드 & readonly

Type Aliases

타입스크립트로 코드를 작성하다보면 

let 동물 :string | number | undefined;

길고 복잡하게 타입을 나열하는 경우가 많아진다. 

긴 타입 정의가 보기 싫거나, 나중에 또 사용하는 타입인 경우에는 따로 변수에 담아서 사용할 수 있다. 

 

타입을 변수처럼 만드는 것을 type 키워드를 통해서 가능하다. 

type 키워드를 사용하는 것을 type alias 라고 한다. 

 

type Animal = string | number | undefined;

let 동물 :Animal;

type 변수명 = 타입 종류 

타입을 변수처럼 만드는 alias 문법이다. 일반적으로 타입 변수를 만들때는 대문자로 시작한다. 

 

type 키워드는 특징이 있는데, 바로 재정의가 불가능하다. 

type Name = string;
// type Name = number;  에러

 

Object 타입 

type Person = {
    name : string,
    age : number,
}

let man : Person = {
    name : "seo",
    age : 300
}

object 타입도 따로 저장이 가능하다. 

 

속성을 선택사항으로 만들기

type Square = {
	color? : string,
    width : number,
}

let box : Square = {
	width : 1000
}

특정 object 자료는 color와 width 속성 모두 필요하지만, 

color 속성은 선택사항이라면 ? 연산자를 추가해주면 된다. 

 

여러 타입을 합치기 ( extend ) 

type Name = string;
type Age = number;
type NewOne = Name | Age;

OR 연산자를 사용해서 Union 타입을 만들 수 있다. 

NewOne 타입은 string | number를 가지고 있는 타입이다. 

 

type PositionX = { x: number };
type PositionY = { y: number };

type Position = PositionX & PositionY

let position: Position = { x : 1, y : 2 }

object에 지정한 타입을 하나로 합칠 수 있다. 

& 기호를 쓴다면 object 안에 있는 두 속성을 하나로 합쳐준다. 

 

readonly로 잠그기 

const 이름 = {
  name : '엠버'
}
이름.name = '유라';

const 변수의 object는 내부에서 마음대로 변경하는 것이 가능하다. 

const 변수는 재할당만 막아주지, object의 속성까지 바꾸는 것은 관여하지 않기 때문이다. 

 

object 속성이 바뀌지 않게 막고 싶을 때 타입스크립트 문법을 사용한다. 

type Name = {
  readonly name : string,
}

let 휴먼 :Name = {
  name : '엠버'
}

// 휴먼.name = '유라'  에러 발생

readonly 키워드는 속성 왼쪽에 붙여서 특정 속성의 변경이 불가능하게 잠궈주는 역할을 한다. 

반응형