[TS] 🦚typescript 유틸리티 타입

▷ typescript 유틸리티 타입

유틸리티 타입을 이용하면 타입 변환을 더 쉽게 할 수 있기에 알아두면 좋다.

유틸리티 타입	설명	타입 인자
Awaited	비동기 함수나 Promise를 기다렸을 때, 해당 비동기 작업의 결과 값인 Type에 해당하는 타입을 가져옴	<TYPE>
Partial	부분적	<TYPE>
Required	필수적	<TYPE>
Readonly	읽기 전용	<TYPE>
Record	KEY-속성, TYPE-속성값의 타입 형태로 새로운 타입 반환 (인터페이스)	<KEY, TYPE>
Omit	TYPE에서 KEY로 속성을 생략	<TYPE, KEY>
Pick	TYPE에서 KEY로 속성을 선택	<TYPE, KEY>
Exclude	제외. TYPE1에서 TYPE2를 제외 (유니언)	<TYPE1, TYPE2>
Extract	교집합임. TYPE1에서 TYPE2를 추출 (유니언)	<TYPE1, TYPE2>
NonNullable	null과 undefined를 제외 (유니언)	<TYPE>
Parameters	TYPE의 매개변수 타입을 새로운 튜플 타입으로 반환 (함수, 튜플)	<TYPE>
ReturnType	TYPE의 반환 타입을 새로운 타입으로 반환 (함수)	<TYPE>
InstanceType	TYPE의 인스턴스 타입을 반환 (클래스)	<typeof TYPE>

---

🦚 Awaited

비동기 함수나 Promise를 기다렸을 때, 해당 비동기 작업의 결과 값인 Type에 해당하는 타입을 가져온다.

async function fetchData(): Promise<string> {
  return "Hello, World!";
}

async function example() {
  const result: Awaited<ReturnType<typeof fetchData>> = await fetchData();
  console.log(result); // result의 타입은 string으로 추론
}

example();

---

🦚 Partial

부분적

interface User {
  name: string
  age: number
}

type UserPartial = Partial<User>

const a : UserPartial = {
    name: "tata" // age를 적지 않아도 된다.
}

console.log(a.name) // tata

---

🦚 Required

필수적

interface User {
  name: string
  age?: number
}

type UserPartial = Required<User>

const a : UserPartial = {
    name: "tata",
    age: 7  // 적지 않으면 오류가 뜬다.
}

console.log(a.name) // tata
console.log(a.age) // 7 

---

🦚 Readonly

읽기 전용이라 수정이 불가하다.

interface User {
  name: string
  age?: number
}

type UserPartial = Readonly<User>

const a : UserPartial = {
    name: "tata",
    age: 7
}

// a.age = "chimmy" 이렇게 수정이 불가함.

---

🦚 Record

<KEY, TYPE>

KEY를 속성으로, TYPE을 속성 값의 타입으로 가지는 객체 타입을 생성한다.

type Fruit = 'apple' | 'banana' | 'orange';

type FruitMap = Record<Fruit, number>;

const fruitCount: FruitMap = {
  apple: 10,
  banana: 20,
  orange: 15
};

---

🦚 Omit

<TYPE, KEY>

TYPE에서 KEY로 속성을 생략

interface User {
  name: string
  age: number
}

type UserWithoutAge = Omit<User, 'age'>;

const a: UserWithoutAge = {
  name: 'tata',
};

console.log(a.name) // tata

---

🦚 Pick

<TYPE, KEY>

TYPE에서 KEY로 속성을 선택

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

type UserPick = Pick<User, 'name' | 'email'>;

const a: UserPick = {
  name: 'tata',
  email: 'tata@example.com'
};

console.log(a.name) // tata
console.log(a.email) // tata@example.com

---

🦚 Exclude

<TYPE1, TYPE2>
<타입, 제외할 유니온 타입>

제외. TYPE1에서 TYPE2를 제외 (유니언)

type T1 = number | string | boolean;
type T2 = string | boolean;
type T3 = Exclude<T1, T2>; // T3 타입은 number이다.

-----
type T1 = 'a' | 'b' | 'c' | 'd';
type T2 = 'a' | 'c';
type T3 = Exclude<T1, T2>; // T3 타입은 'b' | 'd'이다.

---

🦚 Extract

<TYPE1, TYPE2>
<타입, 교집합시킬 수 있는 유니온 타입>

교집합임. TYPE1에서 TYPE2를 추출 (유니언)

type T1 = number | string | boolean;
type T2 = string | boolean;
type T3 = Extract<T1, T2>; // T3 타입은 string, boolean이다.

-----
type T1 = 'a' | 'b' | 'c' | 'd';
type T2 = 'a' | 'c';
type T3 = Extract<T1, T2>; // T3 타입은 'a' | 'c'이다.

---

🦚 NonNullable

NonNullable

null과 undefined를 제외 (유니언)

type T1 = string | number | null | undefined;
type T2 = Extract<T1, string | null>; // 'string' | null
type T3 = NonNullable<T2>; // 'string'

---

🦚 Parameters

TYPE의 매개변수 타입을 새로운 튜플 타입으로 반환 (함수, 튜플)

type MyFunctionType = (a: number, b: string, c: boolean) => void;
type MyParametersType = Parameters<MyFunctionType>;
// [number, string, boolean]

const a: MyParametersType = [12, "12", true]
console.log(a) // [12, "12", true]

-----
type Example = Parameters<(a: number, b: number) => void>
// [number, number]
  
const a: Example = [12, 13]
console.log(a) // [12, 13]

---

🦚 ReturnType

TYPE의 반환 타입을 새로운 타입으로 반환 (함수)

type R1 = ReturnType<() => string>

const a = (): R1 => {
    return '123'
}
console.log(a()) // "123"

---

🦚 InstanceType

<typeof TYPE>

TYPE의 인스턴스 타입을 반환 (클래스)
typeof를 꼭 붙여주어야 한다.

class MyClass {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

type MyType = InstanceType<typeof MyClass>; // MyClass

const instance: MyType = new MyClass("hello");
console.log(instance); // MyClass { name: 'hello' }

👉 Utility Types
👉 typescript 한글 번역