본문 바로가기

Frontend/typescript

Typescript 배우기 5 (리터럴, 유니온/교차 타입)

// 리터럴 타입
const userName1 = 'Bob'; // 문자열 리터럴 타입
// 상수로 정의되어진 타입

let userName2: string | number = 'Tom';
// 변수로 정의하더라도 문자열로 정의되어지면 문자열 변수만 사용가능
// 해서 | 유니온 타입 사용
userName2 = 3; // error

type job = 'police' | 'developer' | 'teacher';

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

const user: User = {
  name: 'Bob',
  // job: "student" error
  job: 'police',
};

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

//유니온 타입
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);
  // 식별가능한 유니온 타입
  // 동일한 속성의 타입을 다르게해서 구별
  if (gift.name === 'car') {
    gift.start();
  } else {
    gift.call();
  }
}

// Intersection Type
interface Toy {
  name: string;
  color: string;
  price: number;
}

interface Lego {
  name: string;
  bild(): void;
}

const toyLego: Toy & Lego = {
  // 두 인터페이스의 모든 속성 이용
  name: '타요',
  color: 'Red',
  price: 10000,
  bild() {},
};

https://www.youtube.com/watch?v=QZ8TRIJWCGQ&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=5 

 

728x90

'Frontend > typescript' 카테고리의 다른 글

Typescript 배우기 7(제네릭)  (0) 2022.06.05
Typescript 배우기 6 (클래스)  (0) 2022.06.05
Typescript 배우기 4 ( 함수)  (0) 2022.05.19
Typescript 배우기 3 (interface)  (0) 2022.05.19
Typescript 배우기 2(타입종류)  (0) 2022.05.19