타입스크립트: 유틸리티 타입

 

Partial

---

모든 속성을 ? 선택적으로 만들어줌

Partial<TYPE>

interface INewType {
  name?: string,
  age?: number
}

와 같은 효과

 

 

Required

---

반대. 위와 같은 속성을 필수로 변경(?를 없앰)

Required<TYPE>

 

 

 

Readonly

---

type의 모든 속성을 읽기 전용으로 만듦

Readonly<TYPE>

 

 

 

Record

---

key를 속성으로 type을 그 속성 값의 타입으로

type TName = 'neo' | 'lewis';

const developers: Record<TName, number> = {
  neo: 12,
  lewis: 13
};

 

같은 효과

interface INewType {
  neo: number,
  lewis: number
}

 

 

Pick

---

type에서 key로 속성 선택

Pick<TYPE, KEY>

 

interface IUser {
  name: string,
  age: number,
  email: string,
  isValid: boolean
}
type TKey = 'name' | 'email';

const user: Pick<IUser, TKey> = {
  name: 'Neo',
  email: 'thesecon@gmail.com',
  age: 22 // TS2322: Type '{ name: string; email: string; age: number; }' is not assignable to type 'Pick<IUser, TKey>'.
};

 

 

 

 

 

Omit

---

type에서 key로 속성 생략 나머지 새로운 타입 반환

Omit<TYPE, KEY>

interface IUser {
  name: string,
  age: number,
  email: string,
  isValid: boolean
}
type TKey = 'name' | 'email';

const user: Omit<IUser, TKey> = {
  age: 22,
  isValid: true,
  name: 'Neo' // TS2322: Type '{ age: number; isValid: true; name: string; }' is not assignable to type 'Pick<IUser, "age" | "isValid">'.
};

 

 

Exclude

---

1에서 2를 제외한다(유니온)

Exclude<TYPE1, TYPE2>

type T = string | number;

const a: Exclude<T, number> = 'Only string';
const b: Exclude<T, number> = 1234; // TS2322: Type '123' is not assignable to type 'string'.
const c: T = 'String';
const d: T = 1234;

 

 

Extract

---

1에서 2를 추출

Extract<TYPE1, TYPE2>

 

type T = string | number;
type U = number | boolean;

const a: Extract<T, U> = 123;
const b: Extract<T, U> = 'Only number'; // TS2322: Type '"Only number"' is not assignable to type 'number'.

 

 

 

NonNullable

---

null과 undifined제외

NonNullable<TYPE>

 

type T = string | number | undefined;

const a: T = undefined;
const b: NonNullable<T> = null; // TS2322: Type 'null' is not assignable to type 'string | number'.

 

 

 

 

Parameters

---

매개변수 타입을 튜플타입으로 변환

Parameters<TYPE>

function fn(a: string | number, b: boolean) {
  return `[${a}, ${b}]`;
}

const a: Parameters<typeof fn> = ['Hello', 123]; // Type 'number' is not assignable to type 'boolean'.

 

~~와 같음

[string | number, boolean]

 

 

constructorParameters

---

클래스타입의 매개변수를 튜플로 변환

ConstructorParameters<TYPE>

class User {
  constructor (public name: string, private age: number) {}
}

const neo = new User('Neo', 12);
const a: ConstructorParameters<typeof User> = ['Neo', 12];
const b: ConstructorParameters<typeof User> = ['Lewis']; // TS2741: Property '1' is missing in type '[string]' but required in type '[string, number]'.

 

이는

[string, number]

와 같음

 

 

 

 

ReturnType

---

함수의 반환타입 변경

ReturnType<TYPE>

 

function fn(str: string) {
  return str;
}

const a: ReturnType<typeof fn> = 'Only string';
const b: ReturnType<typeof fn> = 1234; // TS2322: Type '123' is not assignable to type 'string'.

 

 

 

InstanceType

---

클래스의 인스턴스 타입 반환

InstanceType<TYPE>

 

class User {
  constructor(public name: string) {}
}

const neo: InstanceType<typeof User> = new User('Neo');

 

 

 

ThisParameterType

---

this 매개변수 타입을 새타입으로 반환, 없는경우 unknown 반환

ThisParameterType<TYPE>

 

// https://www.typescriptlang.org/docs/handbook/utility-types.html#thisparametertype

function toHex(this: Number) {
    return this.toString(16);
}

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

 

 

 

OmitThisParameter

---

함수  this 매개변수 제거 

OmitThisParameter<TYPE>

 

function getAge(this: typeof cat) {
  return this.age;
}

// 기존 데이터
const cat = {
  age: 12 // Number
};
getAge.call(cat); // 12

// 새로운 데이터
const dog = {
  age: '13' // String
};
getAge.call(dog); // TS2345: Argument of type '{ age: string; }' is not assignable to parameter of type '{ age: number; }'.

const getAgeForDog: OmitThisParameter<typeof getAge> = getAge;
getAgeForDog.call(dog); // '13'

this.age에는 어떤 값도 들어갈 수 있음

 

 

 

 

ThisType

---

 

this 컨텍스트 명시, 어떤값도 반환 ❌

ThisType<TYPE>

interface IUser {
  name: string,
  getName: () => string
}

function makeNeo(methods: ThisType<IUser>) {
  return { name: 'Neo', ...methods } as IUser;
}
const neo = makeNeo({
  getName() {
    return this.name;
  }
});

neo.getName(); // Neo

어떤값도 반환하지 않기 때문에 추론되지 않음 as IUser 타입단언 필요