[typescript] Utility Types

dev stefanCho·2021년 7월 23일
0

typescript

목록 보기
4/16
post-custom-banner

타입스크립트에는 global하게 사용할 수 있는 Utility Type이란게 있습니다.

Utility Types

Return Type

function의 Return Type을 생성합니다.

Syntax

ReturnType<Type>

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

이렇게 되면 P의 타입은 아래와 같이 정의됩니다.

type P = {
    x: number;
    y: number;
}

Required Type

Syntax

Required<Type>

type Props = {
  price?: number;
  amount?: number;
}

type p = Required<Props>;
const myProduct: p = {
  price: 1000,
  amount: 1000
}

const yourProduct: p = {
  price: 1000
} // Property 'amount' is missing in type '{ price: number; }' but required in type 'Required<Props>'.(2741)

Props는 optional 값을 갖고있지만, p에는 Required로 타입을 생성하였습니다. 따라서 yourProduct는 amount를 갖고 있지 않아 타입에러가 발생합니다.

Partial Type

Required Type와 반대되는 방식으로, 모든 property를 option으로 생성합니다.

Syntax

Partial<Type>

type Props = {
  price?: number;
  amount?: number;
}

type p = Partial<Props>;
const myProduct: p = {
  price: 1000,
  amount: 1000
}
const yourProduct: p = {
}

모든 property가 option이라서 yourProduct에 에러가 없습니다.

Readonly Type

property의 값을 바꿀 수 없게 됩니다.

Syntax

Readonly<Type>

type Props = {
  price?: number;
  amount?: number;
}

type p = Readonly<Props>;
const myProduct: p = {
  price: 1000,
  amount: 1000
}

myProduct.price = 2000; // Cannot assign to 'price' because it is a read-only property.(2540)

읽기만 가능하므로 price의 값을 바꿀 수 없습니다.

Ref

Typescript handbook: Utility Types

profile
Front-end Developer
post-custom-banner

0개의 댓글