Typescript 타입을 변수에 쏙 part3

 

안녕하세요, 저번시간에는 타입을 확실히 하나만 지정할 수 있는 방법으로

Narrowing과 Assertion을 배워봤습니다. 

 

 

타입스크립트를 사용할 때 (number | string | undefined) 이런 식으로 사용하잖아요? 

이렇게 긴 걸 또 타입스크립트에서는 타입을 변수에 넣어서 사용할 수 도 있습니다. 

 

<목표>

🍖 type alias (타입변수) 

🍖 object readonly 속성

🍖 type alias extend 하는 법 익히기

 

|타입 정의가 너무 길면 Type Aliases (별칭)

코드를 짜면서

let 민철이 :string | number | undefined;

이렇게 길게 타입을 계속 쓰는 경우가 있는데,

이걸 길게 안보고 간략하게 재사용할 수 있도록 변수에 넣었는 방법이 있습니다. type이라는 키워드로!

type 키워드를 사용하는 걸 type alias라합니다. 

 

type 타입변수명 = 타입종류

type person = string | number | undefined;
let 민철이 :person;

타입을 변수처럼 만들어서 쓰는 alias 문법은 지을 때 *대문자로 시작하기

 

Object 타입도 저장가능

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

let friend : person = { name : '민수', age : 19}

 

| readonly로 잠그기

const birth = '200116';
birth = '220116'; //const 변수로는 에러가 난다.

const변수의 특징 중 하나로 const로 할당한 값은

(object 안에서는 변경이 가능하지만)이런 상황에서는 값이 변하지 않습니다. 

 

✨값이 변하지 않는 변수를 만들 때 쓰는 것이 const 변수 

 

"으엥? (const가 object 안에서는 변경이 가능하지만) → 이건 무슨 말예여?"

const변수는 값이 변하지 않는 변수를 만들 때 사용하는 것으로 즉, 재할당이 불가능합니다. 

 

하지만, object 자료를 const에 집어넣어도 object 내부는 마음대로 변경가능합니다.

const 강아지 = {
  name : '깡깡이'
}
강아지.name = '똘똘이';  //const 변수지만 에러안남

직접 코드를 쳐보면 에러가 일어나지않을걸요?

그 이유는 const 변수는 재할당만 막아줄 뿐이지 그 안에 포함되어있는 object 속성 바꾸는 것까지 관여하지 않기 때문입니다.

 

readonly 키워드는 특정 속성을 변경 불가능하게 잠궈준다.

type 애완동물 = {
  readonly name : string,
}

let 강아지 :애완동물 = {
  name : '깡깡이'
}

강아지.name = '똘똘이' //readonly라서 에러남

 

readonly 키워드는 속성의 왼쪽 부분에 입력하며

이렇게 코드를 적으면 에러가 납니다. 앞으로 바뀌면 안 될 속성들이라고 readonly로 잠가놨으니 

 

속성 몇 개가 선택사항이라면

어떤 Object는 font-size, color 모두 필요하지만,

어떤 Object는 font-sze만 필요하다( color는 꼭 필요하지 않은 선택사항이라면 )

type alias를 만들 때  물음표 연산자만 추가합니다.

type content = {
  color? : string,
  font-size : number,
}

let 소개문 :content = { 
  font-size : 11,
}

왜? (물음표 연산자)를?

물음표는 "undefined라는 타입도 가질 수 있다"라는 뜻이기 때문입니다.

 

 

| 더 간편하게 type 키워드 여러 개를 합치자

type Name = string;
type Age = number;

type person = Name | Age;

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

 

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

type P_XY = PositionX & PositionY

let 좌표 :P_XY = { x : 1, y : 2 }

 

type 키워드는 재정의가 불가능하다는 것 주의!

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

 

 

정리를 해보자면

🍖 타입도 변수에 지정할 수 있다는 것
🍖 readonly로 잠궈서 값이 변하지않게 하는 방법
🍖 타입 값을 지정해주는 상황에서 몇 개는 선택사항이다? 그러면 ? (연산자 물음표)