[TypeScript ] #4 리터럴/유니온/교차 타입

1Hoit·2023년 5월 29일
0

TypeScript

목록 보기
4/7
post-thumbnail

리터럴 타입 (Literal Types)

const userName1 = "Bob"; 

let userName2: string | number = "Tom";
userName2 = 3; //에러가 나지 않는다.

//Job 타입은 3가지를 제외하곤 다른걸 사용할 수 없다.
type Job = "police" | "teacher" | "student";

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

const user: User = {
  name : "Bob",
  job : "teacher"
  // job: "developer" Job타입 중 "developer" 없으므로 에러
}
  • const : const로 변수를 선언하면 string 타입이지만 "Bob"이외의 값을 가질 수 없으므로 const userName1: "Bob"으로 타입이 표기된다.
    이러한 const로 정의된 문자열 변수를 문자열 리터럴 타입이라고 한다.

  • let : let으로 변수 선언시 명시적으로 타입을 지정해 주어야한다.

유니온 타입 (Union Types)

  • 유니온타입은 | 로 표기하며 또는의 역할을 해준다.
interface Car {
  name: "car";
  color: string;
  start():void;
}

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

// 유니온타입으로 gift의 타입 설정
function getGift(gift: Car | Mobile){
  // color는 Car, Mobile 두 개의 인터페이스에 
  //공통으로 정의 되어있으므로 사용가능.
  console.log(gift.color);
  //만약 공통된 속성이 아니라면 구분해줘야함
  if(gift.name === "car"){
  gift.start();
  } else {
  gift.call();
  }
}

교차 타입 (Intersection Types)

  • 교차타입은 여러타입을 합쳐서 사용하며 &로 표기하고 and를 의미한다.
  • 교차타입은 여러 타입을 하나로 합치므로 필요한 기능을 모두 가진 하나의 타입이 만들어 지는 것이다.
interface Car {
  name: string;
  start():void;
}

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

//교차타입은 Car, Toy 인터페이스의 모든 속성을 적어줘야 한다.
const toyCar: Toy & Car = {
  name: '타요',
  start(){},
  price: 20000,
  color: "blue" ,
};
profile
프론트엔드 개발자를 꿈꾸는 원호잇!

0개의 댓글

관련 채용 정보