Type Script_10 Utility Type & Type Manipulation (유틸리티 타입 과 유형 조작)

---

Type과 Interface의 특성을 바꿔주는 여러가지 유틸리티 타입이 있는데, 

그 중 자주 사용되는 몇가지를 간추려서 소개한다.

더 알고 싶으신 분은 TYPESCRIPT 👈클릭!

(아래 사용된 예제는 모두 공홈에서 가져왔어요.)

---

Utility Type

1. Partial<type>

  타입의 모든 속성을 선택적(optional)으로 바꿔준다. 요소들을 선택해서 사용할 수 있다.

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

function updateTodo(todo: Todo, todoUpdate: Partial<Todo>) {
  return { ...todo, ...todoUpdate };
}

const todo1 = {
  title: "eating",
  description: "pizza with Krisha",
};

const todo2 = updateTodo(todo1, {
  description: "what you want", // 인터페이스 요소 중 한개만 사용
});

---

2. Required<type>

  타입의 모든 속성을 필수적으로 바꿔준다. 요소들을 전부 사용해야 한다.

  partial type과 반대!

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 }; // 오류!! b 값 넣어야 함.

---

3. Readonly<type>

  타입의 모든 속성을 읽기전용으로 바꿔준다.

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

todo.title = "Hello"; // 오류!! 읽기전용이기 때문에 값을 할당할 수 없음

---

4. Pick<type, keys>

  타입의 속성들 중 내가 원하는 요소만 선택해 타입을 만들 때 사용한다.

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

type TodoPreview = Pick<Todo, "title" | "completed">; // 인터페이스 값 중 두개만 가져옴

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

todo; // const todo: TodoPreview 내가 선택한 요소들로 이루어진 타입으로 지정

---

5. Omit<type, keys>

  타입의 속성들 중 내가 원하는 요소만 빼고(누락시키고) 타입을 만들 때 사용한다.

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

type TodoPreview = Omit<Todo, "description">; // description만 빼고!!

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

todo; // const todo: TodoPreview

---

Type Manipulation (유형 조작)

1. Index type (인덱스 타입)

  다른 타입에 있는 key에 접근해서 그 key의 value의 타입을 그대로 다시 선언할 수 있다.

type Person = { 
  age: number; 
  name: string;
  gender: 'male' | 'female';
};

type Age = Person["age"]; // type Age = number

type I1 = Person[keyof Person]; // age | name | gender 

type I2 = {
  place: string;
  food: string;
  withWho: Person['gender']; // 다른 타입에서 key값을 가져옴
};

---

2. Conditional type (조건부 타입)

  클래스 또는 인터페이스 이름 ? 타입1 : 타입2;

  -> 조건이 맞으면 타입1을 선택하고 아니면 타입2를 선택이 된다.

type Check<T> = T extends string ? boolean : number; // string이면? boolean, 아니면? number

  다른 예시

interface Animal {
  live(): void;
}
interface Dog extends Animal {
  woof(): void;
}

type Example1 = Dog extends Animal ? number : string; // 조건이 맞으므로 number 

type Example2 = RegExp extends Animal ? number : string; // 조건에 틀리므로 string

 * 조건부 타입은 제네릭과 함께 사용될 때에 빛을 발한다✨