TypeScript Type, Union, Intersection

YEZI🎐·2023년 7월 8일
0

TypeScript

목록 보기
7/8

타입 별칭(Type Aliases)

  • 의미없는 반복을 줄이고 타입을 명시적으로 사용하도록 돕는다
  • let, const를 선언해 변수를 초기화 하듯이 type 키워드로 사용 가능
type str = string;
type num = number;
type arr = num[];  // number만 들어올 수 있는 배열
type func = () => void;

type Person = {
  name: str
  age: num
  counts: arr
  getInfo: func
}

interface PersonInterFace {
  name: str
  age: num
  counts: arr
  getInfo: func
}
  • interfacetype의 차이
    • interface는 컴파일러가 추론하려 하지만 type은 추론하지 않음
    • interface는 구조화 및 확장에 용이하지만 그에 비해 type은 기능이 다양하지 않음
    • 컴파일 결과도 다름

유니언(Union) 타입

  • 둘을 합친 결과(합집합)
  • Type Aliases와 자주 사용됨
type StringOrNumber = string | number

const a:StringOrNumber = 'str'
const b:StringOrNumber = 123
const c:StringOrNumber = boolean  // error
type GenderType = 'M' | 'F'

type Person = {
  name: string
  age: number
}

type Me = {
  name: string,
  genderType: GenderType
}

const obj: Person | Me = {
  name: 'YEZI',
  age: 125  // Me에 age가 없지만 Person에 있기 때문에 error 안남
  genderType : 'F'
}

유니언(Union) 타입 판별

  • 무분별한 유니언 타입 사용은 타입을 추론하기 어렵다
    때문에 타입 가드와 불필요한 타입을 다시 재조정하는 과정이 필요함
interface Male {
  name: string;
  age: number;
  genderType: 'M';
}

interface Female {
  name: string;
  age: number;
  genderType: 'F';
}

function createMale({ name, age, genderType }: Male | Female): Male {
  return {name, age, genderType}  // error
  // return 해야 하는 값이 Male이기 때문에 error
}

Intersection 타입

  • 툴의 공통 분모(교집합)
  • Type Aliases와 자주 사용됨
type StringAndNumber = string & number

const a:StringAndNumber = 'str'
const b:StringAndNumber = 123
const c:StringAndNumber = boolean
// 위 세개 다 error: string, number 타입 둘 다를 만족시켜야함
type GenderType = 'M' | 'F'

type Person = {
  name: string
  age: number
}

type Me = {
  name: string,
  genderType: GenderType
}

const obj: Person & Me = {
  name: 'YEZI',
  age: 125  // Me에 age가 없지만 Person에 있기 때문에 error 안남
  // genderType : 'F' => error
  // 교집합 된 속성 중 하나라도 없으면 error
}

profile
까먹지마도토도토잠보🐘

0개의 댓글