TypeScript utility type / 타입스크립트 유틸리티 타입

Partial<T>

T의 모든 프로퍼티를 옵셔널로 만드는 타입.

interface Product{
    id: number;
    name: string;
}

const updateProduct(product:Product, updateProduct:Partial<Product>){
	return {...product, ...updateProduct};
}

const product1 = {
    id:1;
    name:'new desk';
}

const product2 = updateProduct(product1, {name:'old desk'});

updateProduct 함수는, 첫번째 매개변수를 두번째 매개변수로 덮어씌우는 함수다.
product2는 product1에 name을 'old desk' 로 변경했다. <T> 는<{name:string}> 인 셈이다.

 

Readonly<T>

T의 모든 프로퍼티를 readonly로 구성한 타입.

interface Product{
    id: number;
}


const product: Readonly<Product> = {
	id: 99
}

product.id = 98 // Cannot assign to 'id' because it is a read-only property.

id는 read-only property이기때문에 재할당되지 않는다.

 

Record<T, K>

타입 T의 프로퍼티들 집합 K로 타입을 구성한다.

interface Product{
  name: string;
}

type ProductName = 'cup' | 'monitor' | 'keyboard'

const productList: Record<ProductName, Product> = {
  cup:{name:'nice cup'},
  monitor:{name:'big monitor'},
  keyboard:{name:'blue keyboard'}
}

productList 는, ProductName인 cup, monitor, keyboard 라는 이름으로 프로퍼티를 만들고,
그 값은 맨 윗줄에 선언한 Product 타입을 가진다.

 

Pick<T, K>

타입 T에서 프로퍼티 K들을 골라 새로운 타입을 구성한다.

interface Product{
  id:number;
  name: string;
  description:string;
}

type LightProduct= Pick<Product, 'id'>;

const firstProduct: LightProduct = {
  id:99
}

LightProduct는 id 프로퍼티만을 가진 타입이다.
K는 T의 프로퍼티 갯수보다 항상 작거나 같다. 

 

Omit<T,K>

타입 T에서 모든 프로퍼티를 선택한 다음, K를 제거해 타입을 구성한다.

interface Product{
  id:number;
  name: string;
  description:string;
}

type LightProduct= Omit<Product, 'description'>;

const todo: LightProduct = {
  id:99,
  name:'removed description'
}

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>{}

type ExcludedProps =  'isOpen'  | 'onClick'  | 'color';

type Props = Omit<ButtonProps, ExcludedProps>

 

ButtonProps는 버튼의 HTML 어트리뷰트를 모두 포함하고있고, Omit을 통해 ExcludedProps로 선언된 3개의 prop을 제거하고있다.

 

Exclude<T, U>

타입 T에서 U를 제거한 타입을 구성

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

const alphabet1: A = 'a';
const alphabet2: A = 'b';
const alphabet3: A = 'c'; // Type '"c"' is not assignable to type 'A'.

A는 'a', 'b', 'c' 에서 'c'를 제거한 타입이다. 'a' 또는 'b'가 될수있다.

 

Extract<T, U>

타입 T에서 U를 찾아 타입을 구성한다. 쉽게말해 T와 U의 교집합으로 구성된다.

type A = Extract<"a" | "b" , "b" | "d">;

const alphabet1: A = 'a'; // Type '"a"' is not assignable to type '"b"'.
const alphabet2: A = 'b';
const alphabet3: A = 'c'; // Type '"c"' is not assignable to type '"b"'.

 

NonNullable<T>

타입 T에서 null과 undefiend 이 아닌 타입으로 구성.

type A = NonNullable<string|number|undefined>;

const alphabet1: A = null; //Type 'null' is not assignable to type 'A'.
const alphabet2: A = 'a';
const alphabet3: A = '1';

 

Parameters<T>

함수타입 T의 매개변수 타입들의 튜플로 타입을 구성.

declare function test(obj: { a: number, b: string }): void;
type A = Parameters<() => string>;  // 매개변수 없음 []
type B = Parameters<(a: string) => void>;  // 매개변수 a는 [string]
type C = Parameters<(<T>(obj: T) => T)>;  // 매개변수 T는 [unknown]
type D = Parameters<typeof test>;  // obj는 [{ a: number, b: string }]
type E = Parameters<any>;  // any는 unknown[]
type F = Parameters<never>;  // never
type G = Parameters<string>;  // Type 'string' does not satisfy the constraint '(...args: any) => any'.
type H = Parameters<Function>;  // Type 'Function' does not satisfy the constraint '(...args: any) => any'.

 

ConstructorParameters<T>

생성자 함수타입의 매개변수 타입을 추출할수 있게 해준다. 모든 매개변수 타입을 가진 튜플로 타입을 구성.

type A = ConstructorParameters<ErrorConstructor>;  // [(string | undefined)?]
type B = ConstructorParameters<FunctionConstructor>;  // string[]
type C = ConstructorParameters<RegExpConstructor>;  // [string, (string | undefined)?]

const testA:A = [undefined]
const testAA:A = []

const testB:B = ['test', 'testB']
const testC:C = ['test', undefined];

 

ReturnType<T>

함수의 리턴타입으로 타입을 구성.

declare function testA(): {a:string, b:number};

type A = ReturnType<() => string>;  // string;
type B = ReturnType<(a: string) => void>;  // void
type C = ReturnType<(<T>() => T)>;  // {}
type D = ReturnType<typeof testA>;  // { a: number, b: string }
type E = ReturnType<any>;  // any
type F = ReturnType<never>;  // any
type G = Parameters<string>;  // 에러
type H = Parameters<Function>;  // 에러

 

Required<T>

T의 모든 프로퍼티가 필수인 타입을 구성

const product:Required<Product> = {
  id:3,
}
// Property 'name' is missing in type '{ id: number; }' but required in type 'Required<Product>'.

 

깨알상식)
T는 Type, K는 Key, U는 Union 의 약자다. (이 자리에는 아무값이나 써도 된다.)
관습적으로 I는 Input의 의미로 O는 output의 의미로 사용한다.