Post

타입스크립트 - 타입스크립트 - untility, keyof

유틸리티 타입

partial

특정 타입의 부분 집합을 만족하는 타입을 정의

1
2
3
4
5
6
7
8
9
interface Address {
  email: string;
  address: string;
}

const me = {};

const you: Partial<Address> = { email: "abc@dcfg.com" };
const all: Address = { email: "abc@dcfg.com", address: "seoul" };

PICK

interface 안에서 특정 타입만 선택

1
2
3
4
5
6
7
8
9
10
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
  title: "clean room",
  completed: false
};

Omit

interface 안에서 특정 타입만 제거

1
2
3
4
5
6
7
8
9
10
11
12
interface TodoOmit {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
type TodoPreviewOmit = Omit<TodoOmit, "description">;
const TodoOmit: TodoPreviewOmit = {
  title: "clean room",
  completed: false,
  createdAt: 12341212
};

Exclude

일반 union 유형을 전달한 다음 두번째 인수에서 제거할 타입을 지정

1
2
3
4
5
6
7
8
9
10
type myUnionType = "apple" | "lemon" | "orange" | "berry";

let lemon: myUnionType = "lemon";
// lemon type = "apple" | "lemon" | "orange" | "berry";

let noLemonsPlease: Exclude<myUnionType, "lemon"> = "apple";
// noLemonsPlease type = 'apple' | 'orange' | 'berry'

let noAppleOrOrange: Exclude<myUnionType, "apple" | "orange"> = "lemon";
//  noAppleOrOrange type = 'lemon' | 'berry'

Required

원래 유형이 일부 속성을 선택 사항으로 정의한 경우데도 객체에 required 속성이 있는지 확인해야 하는 경우가 있음

1
2
3
4
5
6
7
8
9
10
11
12
13
type User = {
  firstName: string;
  lastName?: string;
};

let secondUser: User = {
  firstName: "Hyemin"
};

// ERROR!!!
let secondUser: Required<User> = {
  firstName: "Hyemin"
};

User 타입에서 lastName은 있을 수도 있고, 없을 수도 있지만 Required를 사용한다면 User타입의 모든 속성이 충족되어야 함

Record<Keys,Type>

속성 키가 Keys고 속성 값이 Type인 객체 타입을 구성
타입의 속성을 다른 타입에 매핑하는데 사용할 수 있음

1
2
3
4
5
6
7
8
9
10
11
interface CatInfo {
  age: number;
  breed: string;
}
type CatName = "miffy" | "moris" | "boris";

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "persian" },
  moris: { age: 5, breed: "maine coon" },
  boris: { age: 2, breed: "british shorthair" }
};

cats의 key들은 CatName의 타입들이고, value값은 CatInfo의 타입들임

ReturnType<T>

함수의 T의 반환 타입으로 구성된 타입

1
2
3
4
5
6
7
8
9
10
11
type T0 = ReturnType<() => string>;
type T1 = ReturnType<() => void>;

function fn(str: string) {
  return str;
}
const a: ReturnType<typeof fn> = fn("hi"); // string

// ERROR!!!
// str의 타입이 string이 아닌 boolean값이기 때문에
const b: ReturnType<typeof fn> = fn(false);

keyof

타입에서 key를 추출할 때 사용

예시1

1
2
3
4
5
6
7
8
interface IUser {
  name: string;
  age: number;
  address: string;
}

type UserKeys = keyof IUser;
// UserKeys type = 'name | 'age' | 'address'

예시2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface IUser {
  name: string;
  age: number;
  address: string;
}

const user = {
  name: "hyem",
  age: 30,
  address: "seoul"
};

type UserKeys = keyof typeof user;
// user 타입들의 key
// UserKeys type = 'name | 'age' | 'address'

예시3

1
2
3
4
5
6
7
enum UserRole {
  admin,
  manager
}

type UserRoleKeys = keyof typeof UserRole;
// UserRoleKeys type = "admin" | "manager"
This post is licensed under CC BY 4.0 by the author.