유틸리티 타입

김윤진·2022년 4월 16일
0

TypeScript

목록 보기
2/2

Partial<T>

T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다
이 유틸리티는 주어진 타입의 모든 하위 집합을 나타내는 타입을 반환한다

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

function updateUser(user: User, criteria: Partial<User>) {
  return { ...user, ...criteria }; 
}

const user1 = {
  type: 'user',
  name: 'Tom',
  age: 25,
};

const user2 = updateUser(user1, {
   age: 22,
});

Readonly<T>

T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성한다
생성된 타입의 프로퍼티는 재할당할 수 없다

interface User {
  name: string;
}

const user: Readonly<User> = {
  name: 'Tom'
};

user.name = 'Smith'; // Error

이 유틸리티는 런타임에 실패할 할당 표현식을 나타낼 때 유용하다

// frizen 객체의 프로퍼티에 재할당하려는 경우
function freeze<T>(obj: T): Readonly<T>;

Record<K, T>

타입 T의 프로퍼티 집합 K로 타입을 구성한다
이 유틸리트는 타입의 프로퍼티들을 다른 타입으로 매핑시키는데 사용할 수 있디

interface UserInfo {
  name: string; 
}

type User = 'Tom' | 'Smith' | 'Kim';

const users: Record<User, UserInfo> = {
   Tom: { name: 'Tom' },
   Smith: { name: 'Smith' },
   Kim: { name: 'Kim' }
}

Pick<T, K>

T에서 프로퍼티 K의 집합을 선택해 타입을 구성한다

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

type PickUserType = Pick<User, 'name' | 'age'>;

const pickUser: PickUserType = {
  name: 'Lee',
  age: 26,
}

Omit<T, K>

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

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

type FilterUserType = Omit<User, 'type'>;

const user: FilterUserType = {
  name: 'Lee',
  age: 20,
}

Exclude<T, U>

T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성한다

type T1 = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c'
type T2 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>; // 'c'
type T3 = Exclude<string | number (() => void), Function>; // string, number

Extract<T, U>

T에서 U에 할당할 수 있는 모든 속성을 추출하여 타입을 구성한다

type T1 = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // 'a'
type T2 = Extract<string | number | (() => void), Function>; // () => void

NonNullable<T>

Tnullundefined를 제외한 타입을 구성한다

type T1 = NonNullable<string | number | undefined>; // string | number
type T2 = NonNullable<string[] | null | undefined> // string[]

Parameters<T>

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

declare function f1(arg: { a: number, b: string }): void
type T1 = Parameters<() => string>; // []
type T2 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<(<T>(arg: T) => T)>; // [unknown]
type T2 = Parameters<typeof f1>; // [{ a: number, b: string }]
type T2 = Parameters<any>; // [unknown]
type T2 = Parameters<never>; // never
type T2 = Parameters<string>; // Error

ConstructorParameters<T>

ConstructorParameters<T> 타입은 생성자 함수 타입의 모든 매개변수 타입을 추출할 수 있도록 해준다
모든 매개변수 타입을 가지는 튜플타입(T가 함수가 아닌 경우 never)을 생성한다

type T1 = ConstructorParameters<ErrorConstructor>; // [(string | undefined)?]
type T2 = ConstructorParameters<FunctionConstructor>; // string[]
type T3 = ConstructorParameters<ReExpConstructor>; // [string, (string | undefined)?]

ReturnType<T>

함수 T의 반환 타입으로 구성된 타입을 만든다

declare function f1(): { a: number, b: string }
type T1 = ReturnType<() => string>; // string
type T2 = ReturnType<(s: string) => void>; // void
type T3 = ReturnType<(<T>() => T)>; // {}
type T4 = ReturnType<(<T extends U, U extends number[]>() => T)>; // number[]
type T5 = ReturnType<typeof f1>; // { a: number, b: string }
type T6 = ReturnType<any>; // any
type T7 = ReturnType<never>; // any
type T8 = ReturnType<string>; // Error

InstanceType<T>

생성자 함수 타입 T의 인스턴스 타입으로 구성된 타입을 만든다

class C {
  x = 0;
  y = 0;
}

type T1 = InstanceType<typeof C>; // C
type T2 = InstanceType<any>; // any
type T2 = InstanceType<never>; // any
type T2 = InstanceType<string>; // Error

Required<T>

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

interface Props {
  a?: number;
  b?: string; 
};

const obj: Props = { a: 5 };

const obj1: Required<Props> = { a: 5 }; // Error 프로퍼티 'b'가 없다

ThisParameterType

함수타입의 this매개변수의 타입 혹은 함수 타입에 this매개변수 없을 경우 unknown을 추출한다
이 타입은 --strictFunctionTypes가 활성화되었을 때만 올바르게 동작한다

function userAge(this: Number) {
  return this.toString(2); 
}

function numberToString(n: ThisParameterType<typeof userAge>) {
  return userAge.apply(n);
}

OmitThisParameter

함수 타입에서 this 매개변수를 제거한다
이 타입은 --strictFunctionTypes가 활성화되었을 때만 올바르게 동작한다

function userAge(this: Number) {
  return this.toString(2); 
}

const oneToAge: OmitThisParameter<typeof userAge> = userAge.bind(1);

ThisType<T>

이 유틸리티는 변형된 타입을 반환하지 않는다
대신 문맥적 this타입에 표시하는 역할을 한다
이 유틸리티를 사용하기 위해서는 --noImplicitThis플래그를 사용해야 한다

type ObjectDescribe<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // 메서드 안에 this 타입은 D & M 이다
}

function makeObject<D, M>(desc: ObjectDescribe<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj = maleObject({
  data: { x: 0, y: 0 },
  methods: {
    moveBy(dx: number, dy: number){ 
      this.x += dx; // 강하게 타입이 정해진 this
      this.y += dy; // 강하게 타입이 정해진 this
    }
  }
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

makeObject의 인자로 넘겨지는 methods객체는 ThisType<D & M>를 포함한 문맥적 타입을 가지고 있고 따라서 methods객체의 메서드 안에 this타입은 { x: number, y: number } & { moveBy(dx: number, dy: number): number }이다
method프로퍼티의 타입이 추론 대상이며 동시에 메서드 안의 this타입의 출처이다

0개의 댓글