Develop/TypeScript

[Typescript] 타입을 변수에 담기(Type Alias) / readonly

dawonny 2023. 9. 17. 17:08
728x90
반응형

Type Aliases

타입 정의가 너무 길면 타입을 변수에 담아서 쓸 수 있다.

Type alias 라고 한다.

여기서 alias 는 '별명' 이라는 의미이다.

let 동물 :string | number | undefined;

예를 들어서 위처럼 동물 이라는 타입이 복잡하면 이걸 따로 빼서 변수에 담아쓸 수 있다.

type Animal = string | number | undefined;
let 동물 :Animal;

이렇게 말이다.

타입을 변수처럼 만들어 쓰는 alias 문법이며, 대문자로 적는게 일반적이다.

 

object 타입 저장하기

type 사람 = {
  name : string,
  age : number,
}

let teacher :사람 = { name : 'john', age : 20 }

위처럼 '사람' 이라는 object type alias 를 만들어 사용할 수도 있다.

 

const와 readonly

원래 const 변수는 값이 변하지 않는 변수를 만들고 싶을 때 사용한다.

재할당 시 에러가 나서 값이 변하는걸 차단한다.

const 친구 = {
  name : '론'
}
친구.name = '헤르미온느';  //const 변수지만 에러안남

하지만 위처럼 '친구' 라는 object 가 있을 때

object 의 내부 값은 변경이 가능하다.

 

const 는 재할당만 막아주고, object 의 속성을 바꾸는 것까지는 관여를 안하기 때문이다.

그래서 만약 const 를 사용하면서, object 의 속성을 바꾸는 것도 막고싶다- 하면 readonly 키워드를 사용하면 된다.

 

readonly 는 속성의 왼쪽에 작성하면된다. 

예시는 아래와 같다.

type Friend = {
  readonly name : string,
}

let 친구 :Friend = {
  name : '론'
}

친구.name = '헤르미온느' //readonly라서 에러남

Friend 라는 타입 alias 를 만들어주었고,

이 Friend 는 object 형태인데 name 이라는 속성을 가지고 있다.

그리고 이 name 속성을 readonly 키워드를 작성해줌으로써 변경되지 못하도록 막았다.

 

(readonly 는 컴파일할 때 에러를 내주는 거지, js 파일을 보면 바뀐다.)

 

object 의 속성이 옵션이라면

object 에 있는 속성 중에 어떤 것들은 옵션(선택사항)이라면

물음표(?) 를 작성해주면된다.

 

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

let 네모 :Square = { 
  width : 100 
}

위처럼 color 는 오른쪽에 ? 를 작성해줌으로써 옵션 속성이 되었다.

따라서 Square 타입의 네모라는 변수를 만들 때

color 속성을 꼭 설정해줄 필요는 없다.

 

여기서 ? 는 전에도 배웠듯 undefined 라는 타입도 가질 수 있다- 라는 의미이다.

 

type extend

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

위처럼 Name 이라는 타입과 Age 라는 타입을 union type 으로 만들수 있다.

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let 좌표 :XandY = { x : 1, y : 2 }

위처럼 object 에 지정한 타입도 합칠 수 있다.

이때는 & 기호를 써서 두 속성을 합쳐줄 수 있다(extend).

 

아래는 type extend 의 예시이다.

type User = { name : string, email? : string, phone : string } 
type Adult = { adult : boolean }

type NewUser = User & Adult;

let 회원가입정보 :NewUser = {
  name : 'kim',
  adult : false,
  phone : 1234
}

 

type 은 재정의가 불가능해요

type Name = string;
type Name = number;

위 예시에서는 Name 이라는 타입을 재정의 해주고 있다.

-> 재정의 불가능하다. 에러 난다!

728x90
반응형