(TS) Utility Type

Mirrer·2022년 12월 29일
0

TypeScript

목록 보기
13/14
post-thumbnail

Utility Type

이미 정의해 놓은 타입을 변환하여 간결한 문법으로 타입을 정의

TypeScript공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.

이러한 유틸리티들은 전역으로 사용 가능하며 그 종류는 다음과 같다.


Partial<T>

Partial은 특정 타입의 부분 집합을 만족하는 타입을 정의하며, 옵셔널 파라미터(?)를 사용하지 않아도 에러가 발생하지 않는다.

interface Person {
  name: string;
  age: number;
}

type UserInfo = Partial<Person>;

const human1: UserInfo = {}; // 가능
const human2: UserInfo = { name: 'mirrer' }; // 가능
const human3: UserInfo = { name: 'mirrer', age: 10 }; // 가능

Readonly<T>

ReadonlyT의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성한다.

즉, 생성된 타입의 프로퍼티는 재할당 할 수 없고 오직 참조만 가능하다.

interface Person {
  name: string;
}

const user: Readonly<Person> = {
  name: 'mirrer',
};

user.name = 'change mirrer'; // Error

Record<K, T>

RecordK 타입을 key으로, T 타입을 value으로 갖는 형태의 타입을 생성한다.

주로 KUnion 문자열 값을 주어 map 형식의 타입을 만들 수 있고 여러 값들을 원하는 키값에 따라 분류할 때 유용하다.

interface Person {
  name: string;
  age: number;
}

const userList: Record<"Mirrer" | "Another", Person> = {
    Mirrer: { name: "mirrer", age: 10 },
    Another: { name: "another", age: 20 }
}

Pick<T, K>

Pick은 특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의한다.

T 는 대상타입, K 는 선택할 속성을 의미한다.

interface Person {
  name: string;
  age: number;
  city: string;
}

const user: Pick<Person, 'name'> = {
  name: 'mirrer',
};

Omit<T, K>

Omit은 특정 타입에서 지정된 속성만 제거한 타입을 정의한다.

T 는 대상타입, K 는 제외할 속성을 의미한다.

interface Person {
  name: string;
  age: number;
  city: string;
}

const user: Omit<Person, 'city'> = {
  name: 'mirrer',
  age: 20
}

Exclude<T, U>

ExcludeT 타입들 중 U 타입과 중복되는 타입을 제외한다.

type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"

type T2 = "A" | "B" | 1
type T3 = Exclude<T2 , string> ; // 1

Extract<T, U>

Extract T 타입에서 U 타입과 중복되는 타입만을 선택한다.

type T1 = Extract<"a" | "b" | "c", "a", "f">; // "a"

type T2 = "A" | "B" | 1
type T3 = Extract<T2 , number> ; // 1

NonNullable<T>

NonNullableT 타입에서 Null, undefined를 제외한 타입을 return 한다.

type T = NonNullable<string | number | undefined>;  // string | number

Parameters<T>

Parameters 함수의 파라미터를 Tuple[] 타입으로 return한다.

type T1 = Parameters<() => string>;  // []
type T2 = Parameters<(s: string) => void>;  // [string]
type T3 = Parameters<(<T>(arg: T) => T)>;  // [unknown]
                     
function typeCheck(arg: { a: number, b: string }): void
type T4 = Parameters<typeof typeCheck>;  // [{ a: number, b: string }]

ReturnType<T>

ReturnType 는 함수 T 반환 타입으로 구성된 타입을 return한다.

type T1 = ReturnType<() => string>;  // string
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]

declare function typeCheck(): { a: number, b: string }
type T4 = ReturnType<typeof typeCheck>;  // { a: number, b: string }

InstanceType<T>

InstanceType 생성자로 초기화된 인스턴스 타입을 return한다.

type T1 = ReturnType<() => string>;  // string
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]

let typeCheck = () => ({ a: 1 });
type T4 = ReturnType<typeof typeCheck>;  // { a: number }

Required<T>

Required T모든 프로퍼티가 필수로 설정된 타입을 구성한다.

interface Numbers {
    num1?: number;
    num2?: number;
};

const num: Required<Numbers> = { num1: 5 }; // Error

참고 자료

TypeScript: JavaScript With Syntax For Types.
React TypeScript Tutorial for Beginners - Codevolution
타입스크립트 입문 - 기초부터 실전까지 - 장기효

profile
memories Of A front-end web developer

0개의 댓글