Front End/TypeScript

[TypeScript] Utility Types

옐 FE 2022. 3. 14. 22:12

회사 프로덕트에서 자바스크립트 대신 타입스크립트를 기본으로 쓰기 때문에 조금 더 잘 이해하고 쓰기 위해서 타입을 정리해본다. 스터디로 타입 스크립트 챌린지를 하고 있기도 한데, 타입스크립트를 사용해본 건 VS Code에서 마우스를 위에 올리면 나오는 타입으로 가져다가 쓰기만 하는 것으로 충분하지 않기 때문에. 흔히 타입스크립트는 자바스크립트에 타입을 얻은 것이라고 표현한다. 그렇기 때문에 타입스크립트 안에 자바스크립트가 포함된다.

 

TypeScript의 Utility Types 페이지에서 'TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공합니다. 이러한 유틸리티는 전역으로 사용 가능합니다.'라고 공식문서에 쓰여있다.

 

https://youtu.be/IeXZo-JXJjc

 

이 포스팅은 코딩앙마님의 유틸리티 타입 영상을 보고 정리해봅니다.

 

  • keyof
interface User {
  id: number;
  name: string;
  age: number;
  gender: "f" | "m";
}

type UserKey = keyof User;

const keyofUser: UserKey = "name";

const keyofUser에 쓸 수 있는 값은 "id", "name", "age", "gender"만 가능하다. keyof는 interface User에 명시된 key만 가능

 

 

  • Partial<T>
interface User {
  id: number;
  name: string;
  age: number;
  gender: "F" | "M";
}

const admin: Partial<User> = {
  id: 123,
  name: 'Yell',
}

/*
Partial<T>를 쓰면...

interface User {
  id?: number;
  name?: string;
  age?: number;
  gender?: "F" | "M";
}

과 같이 타입을 정의한다.
*/

Partial은 interface User에서 적힌 모든 타입을 optional을 넣어준 것과 같게 작용한다. 

 

 

  • Required<T>
interface User {
  id: number;
  name: string;
  age?: number;
}

const admin: Required<User> = {
  id: 12,
  name: 'Yell',
  age: 99,
}

interface User의 age에 ?으로 optional 타입으로 정의했다고 하더라도, Required<T>를 사용하면 반드시 age를 적고 값을 숫자로 할당해야 한다.

 

 

  • Readonly<T>
interface User {
  id: number;
  name: string;
  age: number;
}

const admin: Readonly<User> = {
  id: 12,
  name: 'Yell',
  age: 99,
}

admin.id = 1 // id 밑에 빨간 줄로 타입에러

admin의 타입을 Readonly로 정했기 때문에 해당 객체의 키 값을 수정할 수 없다.

 

 

  • Record<K, T>
type Grade = '1' | '2' | '3';
type Score = 'A' | 'B' | 'C';

const score = Record<Grade, Score> = {
  1: 'A',
  2: 'C',
  3: 'B',
}

score는 key로 type Grade 중에서만 쓸 수 있고, 그 값 역시 type Score에서만 가져와서 쓸 수 있다.

 

interface User {
  id: number;
  name: string;
  age: number;
}

function isValid(user: User) {
  const result: Record<keyof User, boolean> = {
    id: user.id > 0,
    name: user.name !== '',
    age: user.age > 0,
  };
  
  return result;
}

result의 key는 interface User의 key를 쓰며, 그 값은 참 또는 거짓, boolean을 가진다.

 

 

  • Pick<T, K>
interface User {
  id: number;
  name: string;
  age: number;
}

const admin: Pick<User, 'id' | 'name'> = {
  id: 12,
  name: 'Yell',
}

User에서 Pick한, 뽑은 키와 그 값을 할당한다.

 

 

  • Omit<T, K>
interface User {
  id: number;
  name: string;
  age: number;
}

const admin: Omit<User, 'age'> = {
  id: 12,
  name: 'Yell',
}

User에서 age를 제외한 키와 그 값을 할당한다.

 

 

  • Exclude<T1, T2>
type Type1 = string | number | boolean;
type Type2 = Exclude<Type1, string | number>;

Type1에서 정의된 string, number, boolean에서 string과 number를 제외한 것이 Type2의 타입이다. 즉, type Type2 = boolean

 

 

 

  • NonNullable<Type>
type T1 = string | null | undefined | boolean;
type T2 = NonNullable<T1>; // string | boolean;

NonNullable을 사용하면 T1에서 null과 undefined를 제외해서 T2의 타입은 string 또는 boolean이다.

 

 

 

 

 

이 외에는 더 많은 타입스크립트의 유틸리티 타입을 알아보고 싶으면, 타입스크립트의 공식문서를 참고한다.

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

 

Documentation - Utility Types

Types which are globally included in TypeScript

www.typescriptlang.org