TypeScript(6)-Utility Type

2024. 11. 11. 15:19·🥏TypeScript

Utility Type

partial

파셔 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.

interface Address{
  email:string;
  address:string;
}


const all: Address = {email:"asd@asd.com",address:'john'};
//const you = {email:"asd@asd.com"};
//all과 다르게 속성이 둘다 있지않아서 Address타입 사용불가 -> 파셔 사용해보자
const you:Partial<Address> = {email:"asd@asd.com"};
const me:Partial<Address> = {};

pick

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

interface Todo{
  title: string;
  description:string;
  completed:boolean;
}

const todo {
 title:"clean room",
 completed:false
}

여기서 todo의 타입을 어떻게 해줘야하나??
위에서처럼 파셔를 사용해도 가능하다

const todo: Parital<Todo> {
  title:"clean room",
  completed:false
}

그렇지만 픽을 사용하자면

interface Todo{
  title: string;
  description:string;
  completed:boolean;
}

type TodoPreview = Pick<Todo, "title"|"completed">;
// 인터페이스 안에서 타입을 픽할건데 어떤것인지 

const TodoPreview {
 title:"clean room",
 completed:false
}

=> 특정 타입에서 몇개의 속성을 pick해서 새롭게 정리

Omit

특정 속성만 제거한 타입을 정의. pick과 반대!!

interface Todo{
  title: string;
  description:string;
  completed:boolean;
  createdAt:number;
}

type TodoPreview = Omit<Todo, "description">;
// 필요없는거, 제거할 것을 적어준다.

const TodoPreview {
 title:"clean room",
 completed:false,
   createdAt:123123,
}

Exclude

일반 Union 유형을 전달한 다음 두번째 인수에서 제거할 멤버를 지정한다.

Required

원래 유형이 일부 속성을 선택사항으로 정의한 경우에도 객체에 Required속성이 있는지 확인해야하는 경우가 있다.
-> T에 들어있는 모든 property를 다 required로 만들어버리는것

Record <keys,Type>

속성 키가 keys이고 속성 값이 Type인 객체 type을 구성한다.이 유틸리티는 type의 속성을 다른 type에 매필하는데 사용할 수 있다.

ReturnType < T>

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

'🥏TypeScript' 카테고리의 다른 글

TypeScript(8) - Mapped Types  (0) 2024.11.11
TypeScript(7)-Implements vs Extends, Keyof operator  (1) 2024.11.11
TypeScript(5)-함수 오버로딩,Generics  (0) 2024.11.11
TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처  (0) 2024.11.11
TypeScript(3)-tsconfig.json  (0) 2024.11.11
'🥏TypeScript' 카테고리의 다른 글
  • TypeScript(8) - Mapped Types
  • TypeScript(7)-Implements vs Extends, Keyof operator
  • TypeScript(5)-함수 오버로딩,Generics
  • TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처
gprorogpfus
gprorogpfus
:- >
  • gprorogpfus
    gpfusdldks
    gprorogpfus
  • 전체
    오늘
    어제
    • 분류 전체보기 (55)
      • 🎭JavaScript (2)
      • 👚 CSS (1)
      • ⚛️ React (13)
      • 🌃 Next.js (5)
        • 🔜 next.js-study (3)
      • 🥏TypeScript (10)
      • 🏴알고리즘 (2)
      • 🌴트러블슈팅 (3)
      • ⛲ 프로젝트 (6)
        • 👖gproro-shop-app (8)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    GIT
    Redux
    react
    JavaScript
    TypeScript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.2
gprorogpfus
TypeScript(6)-Utility Type
상단으로

티스토리툴바