Utility Type

Jung taeWoong·2021년 5월 9일
0

typescript

목록 보기
8/11
post-thumbnail

Utility Type

  • TS는 다른 프로그래밍 언어와 달리 한 가지의 타입을 기본으로 다른 타입으로 변환 가능

1. Index Type

  • Type의 Key값을 이용하여 Type을 선언
  • 다른 타입에 있는 Key에 접근해서 그 Key의 Value의 타입을 다시 선언할수 있다.
type Person = {
  name: string;
  age: number;
  gender: 'male' | 'female';
};

type Name = Person['name'];  // string
const text: Name; 

type Gender = Person['gender']; // 'male' | 'female'

type Keys = keyof Person; // 'name' | 'age' | 'gender'
const key: Keys = 'gender';

type Persone2 = {
  name: string,
  gender: Person['gender'], // 다른 Type의 Key로 type 선언
}

2. Mapped Type

  • 기존에 있는 Type들을 이용하면서 다른 형태로 변환
  • 기존에있는 Type을 이용하는 Type을 만들 때 기존 Type이 수정을 하게되면 그와 관련된 Type들을 일일이 수정을 해줘야한다.
    - 이런것들을 간편하고 재사용성을 높일수 있게 하는 것이 Map Type
  • 인덱스 괄호 기호([])를 이용하면 for....in과 동일하게 Key를 하나씩 반복시킬 수 있다.
    - ex: [P in keyof T]: T[P]
  • 이미 TS에서는 왠만한 공통적으로 쓰이는 타입들은 이미 만들어져 있다.
    • Readonly<T>: 읽기전용으로 사용
    • Partial<T>: 등록된 property를 optional로 사용
    • Pick<T, K extends keyof T>: 원하는 property만 사용
    • Omit<T, K extends keyof any>: 원하는 property를 빼버릴 때 사용
    • Record<K extends keyof any, T>: K를 key로 T를 value로 묶음.
type Person = {
  name: string;
  age: number;
}
type PersonOptional = { 💩
  name?: string;
  age?: number;
}

type Optional<T> = {
  [P in keyof T]?: T[P]// T가 가지고 있는 키들 중에 하나의 P라는 키
}

type PersonOPtional = Optional<Person>; 😍

3. Conditional Type

  • Type에 조건을 걸어 결정할 수있는 Type
type Check<T> = T extends string ? boolean : number;
type Type = Check<string>; // boolean

type TypeName<T> = T extends string
? 'string'
: T extends number
? 'number'
: T extends boolean
? 'boolean'
: T extends undefined
? 'undefined'
: T extends Function
? 'function'
: 'object';

type T0 = TypeName<string>; // 'string';
type T1 = TypeName<'a'>; // 'string';
type T2 = TypeName<() => void>; // 'function'
profile
Front-End 😲

0개의 댓글