[TS] 🦚typescript 유틸리티 타입

▷ 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>>;
  return result;
}

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]

-----
const test = (a: number, b: number) => {
  return 'test';
}
type Example = Parameters<typeof test>
// [number, number]
  
const a: Example = [12, 13]
console.log(a) // [12, 13]

---

🦚 ReturnType

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

// 1.
type R1 = ReturnType<() => string>

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

-----
  
// 2.
const test = () => {
  return 'test';
}

type R1 = ReturnType<typeof test>;

const b = (): R1 => {
    return '123'
}
console.log(b()) // "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' }

---

▷ Helper

🦚 Equal

비교하기. boolean을 반환

// Equal<T, U>: T와 U가 같은 타입인지 비교 (같으면 true, 다르면 false)
type Equal<T, U> = (<G>() => G extends T ? 1 : 2) extends 
                   (<G>() => G extends U ? 1 : 2) ? true : false;

type Test1 = Equal<1, 1>;   // true
type Test2 = Equal<1, 2>;   // false
type Test3 = Equal<string, string>; // true
type Test4 = Equal<{ a: number }, { a: number }>; // true
type Test5 = Equal<{ a: number }, { a: string }>; // false

---

🦚 Expect

Expect는 주로 테스트 환경에서 타입이 예상한 대로 동작하는지 검증할 때 사용되는 유틸리티 타입이다. 일반적으로 Expect는 Equal<T, U>과 함께 사용된다. TypeScript 자체에는 Expect라는 내장 타입이 없지만, 타입 테스트 라이브러리(@type-challenges/utils) 등에서 제공하거나 직접 정의해서 사용할 수 있다.

type Expect<T extends true> = T;

// 정상 동작 (타입이 같음)
type Test1 = Expect<Equal<1, 1>>;          // 정상
type Test2 = Expect<Equal<string, string>>; // 정상
type Test3 = Expect<Equal<{ a: number }, { a: number }>>; // 정상

// 오류 발생 (타입이 다름)
type Test4 = Expect<Equal<1, 2>>;   // 타입 오류 발생
type Test5 = Expect<Equal<{ a: number }, { a: string }>>; // 타입 오류 발생

👉 Utility Types
👉 typescript 한글 번역