TypeScript 다양한 유틸리티 타입

AN JUHYUN·2024년 2월 19일

react-native 개발일지

목록 보기
7/15

keyof : 키를 union으로

타입의 키 값을 union형태로 받아줌
keyof typeName으로 사용

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

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

const userkey:UserKey = 'name'

Partial

모든 property를 옵셔널로 바꿔줌
Partial<T> 로 사용

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

let admin: Partial<User> = {
	id:0,
    name: 'jenny',
}

일부만 사용하고 싶을 때(관리자는 모든 정보가 필요없으니) Partial<제네릭>으로 작성해줌

Required

모든 property를 필수로 바꿔줌
Required<T> 로 사용

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

let admin: Required<User> = {
	id:0,
    name: 'jenny',
    age: 20,
}

Readonly

읽기전용으로 바꿔줌 : 할당만 가능하고 재할당이 불가능함
Readonly<T> 로 사용

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

let admin: Readonly<User> = {
	id:0,
    age: 20,
}

// admin.id = 4; error발생

Record

키와 타입을 설정함
Record<K,T> 로 사용
K는 키의 타입, T는 타입이다.

Record 기본예제1

1학년부터 4학년까지 점수를 작성하는 점수객체를 만들자

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':'B',
    '3':'D',
    '4':'A',
}

해당 코드를 레코드를 활용하여 작성하면

const score:Record<'1'|'2'|'3'|'4','A'|'B'|'C'|'D'> = {
	'1':'A',
    '2':'B',
    '3':'D',
    '4':'A',
}

학년과 성적을 좀 더 보기 좋게 타입으로 분리하면

type Grade = '1'|'2'|'3'|'4';
type Score = 'A'|'B'|'C'|'D';

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

이 처럼 Record 제네릭의 앞의 값을 키로, 뒤의 값을 타입으로 사용한다.

Record 기본예제2

회원정보를 체크하는 객체를 생성하자

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;
}

위와 같이 레코드를 활용해서 작성한다.

Pick

원하는 property만 가지고 와서 사용 할 수 있음
Pick<T,K>로 사용
T는 가져올 타입 K는 원하는 타입의 가져올 키 값

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

const admin: Pick<User, 'id'|'name'> = {
	id: 0,
    name: 'Bob',
};

Omit

특정 property를 생략하고 사용 할 수 있음
Omit<T,K>로 사용
T는 가져올 타입, K는 제외할 키 값

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

const admin: Omit<User, 'age'> = {
	id: 0,
    name: 'Bob',
};

Exclude

타입1에서 타입2를 제거하고 사용 함
Exclude<T1, T2>로 사용
T1은 가져올 타입 T2는 T1에서 제외할 타입
Omit은 Key로 제거하고 Exclude는 타입으로 제거함

type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>;  // boolean

NonNullable

null과 undefined를 제외한 타입을 생성함

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; // string|void

참고) 코딩앙마 타입스크립트 유튜브

profile
frontend developer

0개의 댓글