유틸리티 타입 (Utility Types)

soohyunee·2023년 4월 29일
0

TypeScript

목록 보기
12/20
post-thumbnail

1. keyof

interface User {
	id: number;
	name: string;
	age: number;
	gender: 'm' | 'f';
}

type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'

const uk: UserKey = 'id';
  • 인터페이스의 키 값들을 유니언 타입으로 받을 수 있음
  • 인터페이스의 키 값중 하나를 입력하지 않으면 에러 발생

2. Partial<T>

interface User {
	id: number;
	name: string;
	age: number;
	gender: 'm' | 'f';
}

let admin: Partial<User> = {
	id: 1,
	name: 'Bob',
};

/*
이것과 같음
interface User {
	id?: number;
	name?: string;
	age?: number;
	gender?: 'm' | 'f';
}
*/
  • 프로퍼티를 모두 옵셔널로 바꾸어 줌
  • 일부만 사용하는게 가능함
  • 없는 프로퍼티를 사용하려고 하면 에러 발생함

3. Required<T>

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

let admin: Required<User> = {
	id: 1,
	name: 'Bob',
	age: 30,
};
  • 모든 프로퍼티를 필수로 바꾸어 줌
  • 옵셔널로 지정해주어도 필수로 바꾸어 줌

4. Readonly<T>

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

let admin: Readonly<User> = {
	id: 1,
	name: 'Bob',
	age: 30,
};

admin.id = 4; // 에러 발생
  • 읽기 전용으로 바꾸어 줌
  • 할당을 하고 이후에 값을 바꾸어주는 것이 불가능 함
  • 처음 할당만 가능하고, 수정은 불가능 함

5. Record<K, T>

interface Score {
	'1': 'A' | 'B' | 'C' | 'D';
	'2': 'A' | 'B' | 'C' | 'D';
	'3': 'A' | 'B' | 'C' | 'D';
	'4': 'A' | 'B' | 'C' | 'D';
}

const score: Score = {
	1: 'A',
	2: 'C',
	3: 'B',
	4: 'D',
};
type Grade = '1' | '2' | '3' | '4';
type Score = 'A' | 'B' | 'C' | 'D' | 'F';

const score: Record<Grade, Score> = {
	1: 'A',
	2: 'C',
	3: 'B',
	4: 'D',
};
  • K는 키, T는 타입을 의미함
  • 각각 타입으로 분리하여 작성하면 가독성이 좋아짐

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;
}
  • 객체의 타입을 명시해줄 때 Record를 사용
  • 키를 명시할때 keyof를 사용해줄 수 있음

6. Pick<T, K>

interface User {
	id: number;
	name: string;
	age: number;
	gender: 'M' | 'W';
}

const admin: Pick<User, 'id' | 'name'> = {
	id: 0,
	name: 'Bob',
};
  • T 타입에서 K 프로퍼티만 골라서 사용
  • 인터페이스에서 해당 프로퍼티만 가져와서 객체를 만들 수 있음

7. Omit<T, K>

interface User {
	id: number;
	name: string;
	age: number;
	gender: 'M' | 'W';
}

const admin: Omit<User, 'age' | 'gender'> = {
	id: 0,
	name: 'Bob',
};
  • 특정 프로퍼티를 생략하고 사용 가능
  • 인터페이스에서 해당 프로퍼티를 제외한 남은 프로퍼티로 객체를 만들 수 있음

8. Exclude<T1, T2>

type T1 = string | number | Boolean;
type T2 = Exclude<T1, number | string>; // Boolean
  • 타입1에서 타입2를 제외하고 사용 가능
  • Omit은 프로퍼티를 제거하고, Exclude는 타입을 제거함
  • 타입1의 타입들 중에서 타입2와 겹치는 타입을 제외시킴

9. NonNullable<Type>

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; // string | void
  • Null을 제외한 타입을 생성
  • undefined도 함께 제외시킴

참고 : 코딩앙마

profile
FrontEnd Developer

0개의 댓글