변수에 담은 타입과 Literal Types으로 만드는 const 변수 유사품

타입도 변수에 담아쓰세요 type 키워드 써서 & readonly

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

 

let 동물 :string | number | undefined;

 

길고 복잡하게 타입을 나열하는 경우가 있음

길고 복잡해 보이는 것이 싫거나 나중에 또 사용하고 싶다면 변수에 담아 쓰면 됨

변수 만드는 것처럼 type이라는 키워드를 사용

type 키워드를 사용하는 것을 type alias라고 함

alias를 번역하면 별칭인데 이 강의에서는 쉽게 변수라고 부름

 

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

 

type 타입변수명 = 타입종류

타입을 변수처럼 만들어서 쓰는 alias 문법 관습적으로 대문자로 시작함

일반 자바스크립트 변수랑 차별을 두기 위해 AnimalType식으로 작명하면 좋음

 

object 타입도 저장가능함

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

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

 

readonly로 잠그기

const 출생지역 = 'seoul'; 
출생지역 = 'busan'; //const 변수는 여기서 에러남

 

const 변수는 값이 변하지 않는 변수를 만들고 싶을때 쓰임

재할당시 에러가 나기 때문에 값이 변하는걸 미리 감지하고 차단할 수 있기 때문

 

const 여친 = {
  name : '엠버'
}
여친.name = '유라';  //const 변수지만 에러안남

 

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

const 변수는 재할당만 막아줄 뿐이고 그 안에 있는 object 속성 바꾸는 것까지 관여하지 않기 때문

object 속성을 바뀌지 않게 막고 싶다면 TS 문법을 사용하면 됨

 

readonly 키워드는 속성 왼쪽에 붙일 수 있으면 특정 속성을 변경 불가능하게 잠궈줌

 

type Girlfriend = {
  readonly name : string,
}

let 여친 :Girlfriend = {
  name : '엠버'
}

여친.name = '유라' //readonly라서 에러남

 

readonly는 컴파일시 에러를 내는 것이기 때문에 변환된 js 파일을 보면 잘 바뀌긴 함

 

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

어떤 object 자료는 color, width 속성이 둘다 필요하지만 어떤 object 자료는 color 속성이 선택사항이라면 

type alias를 여러개 만들어야하는게 아니라 물음표연산자만 추가하면 됨

 

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

let 네모2 :Square = { 
  width : 100 
}

 

color에 ?를 주었기 때문에 color에는 undefined라는 타입도 가질수 있기 때문에 오류가 나지 않음

 

type 키워드 여러개를 합칠 수 있음

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

 

OR 연산자를 이용하여 Union type을 만들 수 있음

NewOne 타입에 마우스를 올려보면 string|number라고 나옴

 

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

 

object에 지정한 타입의 경우 합치기도 가능함 &기호를 쓴다면 object 안의 두개의 속성을 합쳐줌

위 코드에서 XandY 타입은 { x : number, y : number } 이렇게 정의되어짐

이런것을 개발자말로 extend 한다라고 함

Type alias & Type alias 만 가능한게 아니라 Type alias & { name : string }으로도 가능함

 

type 키워드는 재정의가 불가능함

type Name = string;
type Name = number;

 

위의 예시는 type을 재정의 했기 때문에 에러가 남

type과 비슷한 interface 키워드도 있는 interface의 경우에는 재정의가 가능함

하지만 재정의가 불가능한 편이 더 정확하고 안전함

 

Literal Types로 만드는 const 변수 유사품

어떤 변수에 값을 제한하고 싶을때 예시로 어떤 변수가 1또는 0의 값만 가지게 제한하고 싶을때

number타입을 지정하면 너무 광범위하기 때문에 Literal type을 선언하여 미리 골라놓은 데이터만 가지게 할 수 있음

이렇게 특정 글자난 숫자만 가질수 있게 제한을 두는 타입을 literal type이라고 부름

 

Literal Type 만드는 법

let 방향: 'left' | 'right';
방향 = 'left';

 

함수도 똑같이 제한할 수 있음

function 함수(a : 'hello') : 1 | 0 | -1 {
  return 1 
}

 

파라미터 타입선언할 때 글자나 숫자를 집어넣으시면 그 만 파라미터로 넣을 수 있고 return 타입선언할 때도 글자나 숫자를 집어넣으시면 그 값만 return할 수 있음

 

as const 문법

'kim' 이라는 타입만 들어올 수 있는 함수를 만들었는데 자료.name을 입력하고 싶을때

 

var 자료 = {
  name : 'kim'
}

function 내함수(a : 'kim') {

}
내함수(자료.name)

 

이렇게 코드를 짜면 에러가 남

함수는 'kim' 타입만 입력할 수 있다고 해놨고 자료.name은 string 타입이지만 'kim' 타입은 아니기 때문

 

이럴 경우 

1. object 만들 때 타입을 미리 잘 정하기

2. assertion(as 'kim')

3. as const를 애초에 object 자료에 붙일 수 있음

 

var 자료 = {
  name : 'kim'
} as const;

function 내함수(a : 'kim') {

}
내함수(자료.name)

 

as const는 효과 2개

1. 타입을 object의 value로 바꿔줌(타입을 'kim'으로 바꿔줌)
2. object안에 있는 모든 속성을 readonly로 바꿔줌(변경하면 에러가 남)

이렇게 object를 잠그고 싶으면 as const를 활용하면 됨