[TypeScript] TypeScript와 유틸리티 타입

1. Partial<T> - 일부만 사용할 수 있는 타입 만들기

• Partial<T>는 객체 타입 T의 모든 프로퍼티를 선택적(optional) 으로 변환

사용 예시

 

// 유틸리티 타입 -> 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용하는 타입들을 미리 만들어 놓은 것

// Partial<T>
// 부분적인, 일부분의
// 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티 바꿔주는 타입
interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

// Partial<T>를 직접 구현해보기
type Partial<T> = { 
  [key in keyof T]?: T[key]; 
};

// const draft0: Post = { -> 이 경우에 tags 값이 설정되어 있지 않기 때문에 에러 발생!!
//  title: "제목 나중에 짓자",
//  content: "초안...",
// };

const draft: Partial<Post> = { // Partial<Post>로 모든 속성이 선택적 속성이 되도록 함
  title: "제목 나중에 짓자",
  content: "초안...",
};

---

2. Required<T> - 모든 프로퍼티를 필수로 만들기

• Required<T>는 객체 타입 T의 모든 프로퍼티를 필수로 설정

사용 예시

 

// Required<T>
// 필수의, 필수적인
// 특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔주는 타입 

// Required<T>를 직접 구현해보기
type Required<T> = {
  [key in keyof T]-?: T[key]; // -? 는 ?를 빼겠다는 의미임
};

const withThumbnailPost0: Post = { // 이전 예제에서 모든 속성을 선택적 속성으로 만들었기 때문에 thumbnailURL: "https://...", 가 없어도 오류 발생 x
  title: "한입 타스 후기",
  tags: ["ts"],
  content: "",
  //thumbnailURL: "https://...",
};

const withThumbnailPost: Required<Post> = { // 모든 속성을 필수 속성으로 만듬
  title: "한입 타스 후기",
  tags: ["ts"],
  content: "",
  thumbnailURL: "https://...",
};

---

3. Readonly<T> - 수정 불가능한 객체 만들기

• Readonly<T>는 객체 타입 T의 모든 프로퍼티를 읽기 전용으로 만들어 줌

사용 예시

 

// Readonly<T>
// 읽기전용 수정불가
// 특정 객체 타입에서 모든 프로퍼티를 읽기 전용 프로퍼티로 만들어주는 타입

// Readonly<T>를 직접 구현해보기
type Readonly<T> = {
  readonly [key in keyof T]: T[key]; // readonly를 추가해서 모든 속성을 Readonly<T>로 만듬
};

const readonlyPost: Readonly<Post> = {
  title: "보호된 게시글 입니다.",
  tags: [],
  content: "",
};

// readonlyPost.content = ""; -> Readonly<T> 이기 때문에 오류 발생!

---

4. Pick<T, K> - 특정 프로퍼티만 골라서 사용

• Pick<T, K>는 객체 타입 T에서 K에 해당하는 키들만 선택적으로 추출한 타입을 만듬

사용 예시

 

// Pick<T, K>
// -> 뽑다, 고르다
// -> 객체 타입으로부터 특정 프로퍼티만 딱 골라내는 그런 타입
interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

// Pick<T, K>를 직접 구현해보기
type Pick<T, K extends keyof T> = { // 타입 T에 있는 키인 K를 선택
  // K extends 'title' | 'tags' | 'content' | 'thumbnailURL'
  // 'title' | 'content' extends 'title' | 'tags' | 'content' | 'thumbnailURL'
  [key in K]: T[key];
};

// const legacyPost0: Post = { // tags가 없기 때문에 에러 발생!!
//    title: "옛날 글",
//    content: "옛날 컨텐츠",
// }

const legacyPost: Pick<Post, "title" | "content"> = { // 고르고 싶은 속성만 골라서 사용 -> "title" | "content" 의 자리에 number 같은 상관 없는 타입이 들어가지 않도록 제약을 걸어줌
    title: "옛날 글",
    content: "옛날 컨텐츠",
};

---

5. Omit<T, K> - 특정 프로퍼티를 제외한 타입 만들기

• Omit<T, K>는 객체 타입 T에서 K에 해당하는 키들을 제외한 타입을 만듬

사용 예시

 

// Omit<T, K> -> Pick<T, K> 와 반대의 가능
// -> 생략하다, 빼다
// -> 객체 타입으로부터 특정 프로퍼티를 제거하는 타입

// Omit <T,K>를 직접 구현해보기
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; // Exclude<keyof T, K>를 선택함으로서 구현

// T = Post, K = 'title'
// Pick<Post, Exclude<keyof Post, 'title'>>
// Pick<Post, Exclude<'title' | 'content' | 'tags' | 'thumbnailURL', 'title'>> // Exclude 는 앞의 전달 받은 타입에서 뒤의 전달 받은 타입을 제거
// Pick<Post, 'content' | 'tags' | 'thumbnailURL' > // 'title' | 'content' | 'tags' | 'thumbnailURL' 에서 'title'를 제거함

const noTitlePost: Omit<Post, "title"> = { // Post 타입에서 "title" 속성만 제거
  content: "",
  tags: [],
  thumbnailURL: "",
};

---

6. Record<K, V> - 동일한 구조를 가진 객체 만들기

• Record<K, V>는 K를 키로 하고 V를 값으로 하는 객체 타입을 생성

사용 예시

 

// Record<K, V> -> 동일한 패턴을 갖는 객체 타입을 쉽게 정의 가능

// Record<K, V>를 직접 구현해보기
type Record<K extends keyof any, V> = { // K에 들어오는 것은 어떤 객체에서 추출한 합집합의 타입이라고 제약을 걸어주는 것
  [key in K]: V;
};

type Thumbnail0 = { // 이렇게 작성할 경우, 중복 코드가 많음
  large: { url: string; size: number };
  medium: { url: string; size: number };
  small: { url: string; size: number };
  watch: { url: string; size: number };
}

type Thumbnail = Record< // 썸내일의 타입을 구분해서 제공 -> Record<K, V> 는 K로는 객체의 속성 키를 합집합으로 받고, V에는 value를 받음
  "large" | "medium" | "small" | "watch",
  { url: string; size: number }
>;

---

7. Exclude<T, U> - 특정 타입을 제외한 유니언 만들기

• Exclude<T, U>는 T에서 U를 제외한 타입

사용 예시

 

// Exclude<T, U>
// -> 제외하다, 추방하다
// -> T에서 U를 제거하는 타입

// Exclude<T, V>를 직접 구현해보기
type Exclude<T, U> = T extends U ? never : T;

type A = Exclude<string | boolean, boolean>;
// 1 단계
// Exclude<string, boolean> | Exclude<boolean, boolean>

// 2 단계
// string | never

// 최종적으로는 string

---

8. Extract<T, U> - 교집합 타입 추출하기

• Extract<T, U>는 T에서 U에 해당하는 타입만 추출

사용 예시

 

// Extract<T, U>
// -> T에서 U를 추출하는 타입

// Extract<T, V>를 직접 구현해보기
type Extract<T, U> = T extends U ? T : never;

type B = Extract<string | boolean, boolean>; // B = boolean

// ReturnType<T>
// -> 함수의 반환값 타입을 추출하는 타입

---

9. ReturnType<T> - 함수 반환 타입 추출

• ReturnType<T>은 함수 타입 T의 반환값 타입을 추출

사용 예시

 

// ReturnType<T>
// -> 함수의 반환값 타입을 추출하는 타입 

// ReturnType<T, V>를 직접 구현해보기
type ReturnType<T extends (...args: any) => any> = T extends (
  ...agrs: any
) => infer R
  ? R
  : never;

function funcA() {
  return "hello";
}

function funcB() {
  return 10;
}

type ReturnA = ReturnType<typeof funcA>; // ReturnA = string

type ReturnB = ReturnType<typeof funcB>; // ReturnA = string

---

10. 깃허브 코드 내용

• https://github.com/Chaehyunli/typescript_study/tree/main/section10