Hyebin‘s blog

Literal Types

Literal Types : 정해진 값을 가진 것을 문자열 리터럴 타입이라고 한다.

const : 변하지 않는 값 선언 시
let : 변할 수 있는 값 선언 시

const userName1 = "Bob"; //변할 수 없으니 Bob외의 값은 가질 수 없음,
//userName1이 Literal Types

let userName2 = "Tom"; //언제든지 변할 수 있어 string 타입이다.
userName2 = 3; //최소 할당된 값이 string이므로 에러 발생

let userName3: string | number = "Tom2"; 
userName3 = 3; //명시적으로 타입 작성 시 사용 가능
type Job = "police" | "developer" | "teacher"; //타입 생성

interface User { 
  name: string;
  job: Job;
}

const user: User = {
  name: "Bob",
  job: "teacher",
};

interface HighSchoolStudent {
  name: string;
  grade: 1 | 2 | 3;
}

이때, |은 유니온 타입이라고 한다.

 

Union Types = or을 의미

동일한 속성의 타입을 다르게 정의해서 구분할 수 있는 것을 식별가능한 유니온타입이라고 한다.

interface Car {
  name: "car";
  color: string;
  start(): void;
}

interface Mobile {
  name: "mobile";
  color: string;
  call(): void;
}


function getGift(gift: Car | Mobile) {
  console.log(gift.color); //둘다 color을 가지고 있어서 문제 없음
  if (gift.name === "car") {
    gift.start();
  } else {
    gift.call();
  }
}

식별 가능한 유니온타입을 사용했다.
동일한 name의 속성을 정의하고 타입을 다르게 줌으로써 두개의 인터페이스 구분이 가능하다.
검사 할 수가 많아지면 switch를 사용하는 것이 가독성이 좋다.

Intersection Types = and를 의미

Intersection Types : 여러 타입을 합쳐서 사용한다.
필요한 모든 기능을 가진 하나의 타입이 만들어진다.

interface Car {
  name: string;
  start(): void;
}

interface Toy {
  name: string;
  color: string;
  price: number;
}

const toyCar : Toy & Car = {
    name: "타요",
    start(){
        console.log("뿌")
    },
    color: "blue",
    price: 1000
}

 

'Front-end > TypeScript' 카테고리의 다른 글

[TypeScript] 제네릭 Generics  (0) 2022.03.06
[TypeScript] 클래스 Class  (0) 2022.03.06
[TypeScript] 함수  (0) 2022.03.06
[TypeScript] 인터페이스(interface)  (0) 2022.03.06
[TypeScript ] 기본 타입  (0) 2022.03.06
profile

Hyebin‘s blog

@hyebin Lee

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그