Exclude 타입은 다음과 같이 T로부터 U를 제거하는 타입임.

type A = Exclude<string | boolean, string>;
// 결과: boolean

직접 구현하면 다음과 같음.

type Exclude<T, U> = T extends U ? never : T;

Extract<T, K>

Extract 타입은 다음과 같이 T로부터 U를 추출하는 타입임.

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

직접 구현하면 다음과 같음.

type Extract<T, U> = T extends U ? T : never;

ReturnType

ReturnType은 타입변수 T에 할당된 함수 타입의 반환값 타입을 추출하는 타입임. 이 타입은 infer를 활용해 구현할 수 있음.

type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : never;

예시

function funcA() {
  return "hello";
}

function funcB() {
  return 10;
}

type ReturnA = ReturnType<typeof funcA>;
// 결과: string

type ReturnB = ReturnType<typeof funcB>;
// 결과: number

Pick은 특정 객체 타입에서 일부 프로퍼티만 골라내는 유틸리티 타입임.

예제

interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

const legacyPost: Pick<Post, "title" | "content"> = {
  title: "",
  content: "",
};

직접 구현

type Pick<T, K extends keyof T> = {
  [key in K]: T[key];
};

Omit<T, K>

Omit은 특정 객체 타입에서 일부 프로퍼티만 제외하는 유틸리티 타입임.

예제

const noTitlePost: Omit<Post, "title"> = {
  content: "",
  tags: [],
  thumbnailURL: "",
};

직접 구현

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

Record<K, V>

Record는 키-값 쌍을 가지는 객체 타입을 생성할 때 사용함.

예제

type Thumbnail = Record<
  "large" | "medium" | "small",
  { url: string }
>;

직접 구현

type Record<K extends keyof any, V> = {
  [key in K]: V;
};

선요약

타입스크립트의 Partial<T>, Required<T>, Readonly<T>는 맵드 타입 기반의 유틸리티 타입으로, 객체 타입의 프로퍼티를 선택적, 필수, 읽기 전용으로 변환함. 이들은 제네릭 + keyof + 맵드 타입의 조합으로 구현할 수 있음.

Partial

목적

객체 타입의 모든 프로퍼티를 선택적(optional)으로 변환함.

예시

interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

const draft: Partial<Post> = {
  title: "제목 나중에 짓자",
  content: "초안...",
};

구현

type Partial<T> = {
  [key in keyof T]?: T[key];
};

Required

목적

객체 타입의 모든 프로퍼티를 필수(required)로 변환함.

예시

interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

const withThumbnailPost: Required<Post> = {
  title: "한입 타스 후기",
  tags: ["ts"],
  content: "",
  thumbnailURL: "https://...",
};

구현

type Required<T> = {
  [key in keyof T]-?: T[key];
};

Readonly

목적

객체 타입의 모든 프로퍼티를 읽기 전용(readonly)으로 변환함.

예시

interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

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

readonlyPost.content = "해킹당함"; // 오류 발생

구현

type Readonly<T> = {
  readonly [key in keyof T]: T[key];
};

마지막 요약

• Partial<T>: 모든 프로퍼티를 선택적으로 만듦 (?).
• Required<T>: 모든 선택적 프로퍼티를 필수로 만듦 (-?).
• Readonly<T>: 모든 프로퍼티를 읽기 전용으로 만듦 (readonly).
• 이들 모두 맵드 타입 + keyof + 제네릭 조합으로 구현 가능함.

• 유틸리티 타입은 타입스크립트가 제공하는 특수한 타입 조합 도구임.
• 제네릭, 맵드 타입, 조건부 타입 등을 조합해 자주 쓰이는 형태의 타입을 미리 구현해둔 것임.
• 대표적인 유틸리티 타입으로는 Readonly<T>, Partial<T> 등이 있음.
• 이번 섹션에서는 이들 중 핵심적인 타입만 다루며, 직접 구현도 병행함.

유틸리티 타입 소개

타입스크립트에서는 제네릭, 맵드 타입, 조건부 타입 등을 기반으로 실무에서 자주 사용되는 타입 조작 패턴을 미리 구현해둔 유틸리티 타입(Utility Types)을 제공함.

이들은 복잡한 타입을 짧고 직관적으로 표현하게 해 주며, 타입 안전성과 생산성을 동시에 확보할 수 있음.

예시 1: Readonly

Readonly<T>는 객체의 모든 프로퍼티를 읽기 전용(readonly)으로 변환함.

interface Person {
  name: string;
  age: number;
}

const person: Readonly<Person> = {
  name: "이정환",
  age: 27
};

person.name = ""; // ❌ 오류: 읽기 전용 프로퍼티

예시 2: Partial

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

interface Person {
  name: string;
  age: number;
}

const person: Partial<Person> = {
  name: "이정환"
};
// age는 생략 가능

유틸리티 타입의 핵심

타입스크립트는 수십 가지 유틸리티 타입을 기본 제공함. 그중 자주 쓰이는 타입들부터 숙지하면 실무 적용에 큰 도움이 됨.

공식 문서: 👉 https://www.typescriptlang.org/docs/handbook/utility-types.html

학습 방향

이번 섹션에서는 다음과 같은 방향으로 진행함:

• 맵드 타입 기반 유틸리티 타입: Readonly<T>, Partial<T> 등
• 조건부 타입 기반 유틸리티 타입: Exclude<T, U>, Extract<T, U> 등
• 직접 구현을 통해 유틸리티 타입의 원리와 작동 방식 이해

🧾 마지막 요약

• 유틸리티 타입은 타입 조작 기능의 집약체로, 복잡한 타입을 효율적으로 다룰 수 있게 함.
• 대표적인 타입으로 Readonly, Partial, Exclude, ReturnType 등이 있음.
• 다음 시간부터 실전 유틸리티 타입 구현을 병행하여 타입스크립트 고급 문법 숙련도를 높일 예정임.

• infer는 조건부 타입 안에서 특정 타입을 추론할 수 있게 해주는 타입스크립트의 특수 문법임.
• infer는 보통 조건부 타입 내부에서 사용되며, 추론 가능한 타입이 있을 경우 해당 타입을 바탕으로 분기된 타입 결과를 생성함.
• 대표적인 활용 예시로는 ReturnType<T> 과 PromiseUnpack<T> 등의 유틸리티 타입 구현이 있음.

infer로 ReturnType 구현하기

type ReturnType<T> = T extends () => infer R ? R : never;

infer R은 함수 타입 T의 반환값을 추론해 R로 잡겠다는 의미임. 예시를 보자.

type FuncA = () => string;
type FuncB = () => number;

type A = ReturnType<FuncA>; // string
type B = ReturnType<FuncB>; // number

타입 변수 T에 함수 타입을 넣으면 해당 함수의 반환값 타입을 infer R이 추론하게 됨.
즉 FuncA는 () => string 타입이므로 R은 string이 되고, 따라서 A는 string 타입이 됨.

추론 실패 시

type C = ReturnType<number>; // never

이 경우에는 number 타입은 함수 타입이 아니므로 조건식을 만족하지 않음.
결과적으로 ReturnType<number>는 never 타입이 됨.

infer로 Promise의 결과 타입 추출하기

type PromiseUnpack<T> = T extends Promise<infer R> ? R : never;

PromiseUnpack은 Promise<T> 타입으로부터 내부의 T 타입을 꺼내오는 유틸리티 타입임.

예시:

type PromiseA = PromiseUnpack<Promise<number>>; // number
type PromiseB = PromiseUnpack<Promise<string>>; // string

infer R을 통해 Promise<number>는 number 타입이 추론되고, 최종적으로 PromiseUnpack<Promise<number>>는 number가 됨.

🧩 마지막 요약

• infer는 조건부 타입 내에서 특정 타입을 추론할 때 사용함.
• 일반적으로 유틸리티 타입에서 많이 활용됨 (예: ReturnType, Parameters, PromiseUnpack 등).
• 조건식이 성립하지 않으면 never 타입으로 수렴됨.

✅ 선요약

• 조건부 타입에 유니온 타입을 넣으면 각 요소에 대해 조건이 개별로 평가되는 분산 조건부 타입이 작동함.
• 이를 이용해 Exclude, Extract 등 다양한 유틸리티 타입을 직접 구현 가능함.

조건부 타입 복습

type StringNumberSwitch<T> = T extends number ? string : number;

let a: StringNumberSwitch<number>;  // string
let b: StringNumberSwitch<string>;  // number

분산 조건부 타입의 등장

type StringNumberSwitch<T> = T extends number ? string : number;

let c: StringNumberSwitch<number | string>; 
// 결과: string | number

❓ 왜 이런 결과가 나옴?

• 조건부 타입의 타입 변수에 Union 타입이 들어가면, 조건이 각 요소별로 분리되어 평가됨.
• 이를 분산 조건부 타입이라 함.

분산 과정:

1. 타입 분해:

   StringNumberSwitch<number>     // string
   StringNumberSwitch<string>     // number

2. 결과 결합:

   string | number

Exclude 조건부 타입 구현

type Exclude<T, U> = T extends U ? never : T;

type A = Exclude<number | string | boolean, string>; 
// 결과: number | boolean

계산 흐름:

1. 타입 분리:

   Exclude<number, string>   // number
   Exclude<string, string>   // never
   Exclude<boolean, string>  // boolean

2. 결과 결합:

   number | never | boolean → number | boolean

never는 공집합이므로 Union에서 자동 제거됨

🧠 마지막 요약

• 조건부 타입에 유니온을 전달하면 자동으로 분산 평가됨.
• 이를 활용하면 타입 연산에서 필터링, 매핑 같은 고급 기능을 구현할 수 있음.
• Exclude<T, U>는 T에서 U에 해당하는 타입만 제거함.

조건부 타입은 extends와 삼항 연산자(? :)를 활용해 타입을 상황에 따라 다르게 설정할 수 있게 해줌. 특히 제네릭과 함께 사용할 때 매우 강력하며, 값의 타입에 따라 반환 타입을 유연하게 조절할 수 있음. 타입스크립트의 타입 로직에 논리적 분기를 넣을 수 있다는 점이 핵심임.

1. 조건부 타입 기본 문법

type A = number extends string ? number : string; 
// A → string

number가 string의 서브타입인지 여부에 따라 결과가 달라짐. 위 예시는 false가 되어 A는 string이 됨.

type ObjA = { a: number };
type ObjB = { a: number; b: number };

type B = ObjB extends ObjA ? number : string;
// B → number (ObjB는 ObjA의 슈퍼셋)

2. 제네릭 조건부 타입

type StringNumberSwitch<T> = T extends number ? string : number;

let varA: StringNumberSwitch<number>; // string
let varB: StringNumberSwitch<string>; // number

타입 변수 T가 number면 결과는 string, 아니면 number가 됨.

3. 조건부 타입 실전 예제

function removeSpaces<T>(text: T): T extends string ? string : undefined {
  if (typeof text === "string") {
    return text.replaceAll(" ", "") as any;
  } else {
    return undefined as any;
  }
}

• removeSpaces("hello world") → string
• removeSpaces(undefined) → undefined

하지만 위 방식은 as any 때문에 타입 안정성이 깨질 수 있음. 예를 들어 string이 아닌 값을 반환해도 타입 검사를 통과함.

4. 함수 오버로딩으로 해결

function removeSpaces<T>(text: T): T extends string ? string : undefined;
function removeSpaces(text: any) {
  if (typeof text === "string") {
    return text.replaceAll(" ", "");
  } else {
    return undefined;
  }
}

let result = removeSpaces("hi im winterlood"); // string
let result2 = removeSpaces(undefined);         // undefined

오버로딩을 사용하면 조건부 타입의 결과를 실제로 타입스크립트가 추론할 수 있게 되므로, as any 없이도 타입 안정성을 확보할 수 있음.

🔁 마지막 정리

• 조건부 타입은 타입에 if-else 같은 논리를 넣을 수 있게 해주는 기능임.
• A extends B ? C : D 형식으로 작성하며, 특히 제네릭과 함께 강력함.
• as any보다는 함수 오버로딩을 통한 추론이 더 안전하고 실용적임.
• 실제 사용 예시로 입력 타입에 따라 다른 반환 타입을 가질 수 있는 함수를 구현할 수 있음.

선요약

템플릿 리터럴 타입은 문자열 패턴을 조합해 새로운 문자열 리터럴 유니온 타입을 만드는 타입스크립트의 타입 조작 기능임. 여러 문자열 유니온 타입을 조합할 때 반복적인 수작업 없이 효율적으로 조합 가능함.

템플릿 리터럴 타입이란?

템플릿 리터럴 타입은 타입 조작 기능 중 가장 단순한 기능으로, 템플릿 리터럴 문법을 이용해 특정 패턴을 갖는 문자열 타입을 만드는 기능임.

type Color = "red" | "black" | "green";
type Animal = "dog" | "cat" | "chicken";

위와 같은 코드에서 아래와 같이 모든 조합의 문자열 리터럴 타입을 만들고 싶다고 가정함:

type ColoredAnimal =
  | "red-dog"
  | "red-cat"
  | "red-chicken"
  | "black-dog"
  | "black-cat"
  | "black-chicken"
  | "green-dog"
  | "green-cat"
  | "green-chicken";

위처럼 수작업으로 만들면 타입이 늘어날수록 불편하고 오류 가능성도 커짐. 이럴 때 템플릿 리터럴 타입을 쓰면 다음처럼 간단하게 표현 가능함:

type ColoredAnimal = `${Color}-${Animal}`;

• Color의 모든 값과 Animal의 모든 값을 문자열로 조합한 유니온 타입이 자동으로 생성됨
• ${} 안에는 타입 변수 또는 타입 이름을 넣을 수 있음

예시 응용

특정 접두어 붙이기

type Prefix = "pre";
type Word = "load" | "view";

type PrefixedWord = `${Prefix}_${Word}`;
// "pre_load" | "pre_view"

이벤트 핸들러 이름 만들기

type Event = "click" | "hover";
type HandlerName = `on${Capitalize<Event>}`;
// "onClick" | "onHover"

• Capitalize<T>: 첫 글자를 대문자로 바꿔줌
• Uncapitalize<T>: 첫 글자를 소문자로 바꿔줌
• Uppercase<T>, Lowercase<T>: 대문자화, 소문자화

주의사항

• 템플릿 리터럴 타입은 컴파일 타임에 조합됨 → 런타임에는 영향을 주지 않음
• ${} 내부에 값(value)을 넣는 것이 아니라 타입을 넣는 것임
• 리터럴 유니온 타입이 너무 많아지면 타입 추론이 느려질 수 있음

마지막 요약

템플릿 리터럴 타입은 문자열 리터럴 조합을 자동화하여, 복잡한 유니온 타입을 간결하고 안전하게 생성할 수 있게 해주는 타입스크립트의 문법임. 반복적인 문자열 타입 정의를 줄이고, 패턴 기반의 타입 생성이 필요한 상황에서 특히 유용함.

요약

맵드 타입(mapped type)은 기존 객체 타입을 기반으로 새로운 객체 타입을 유연하게 생성할 수 있는 타입스크립트의 기능임. keyof, 인덱스드 엑세스 타입 등과 결합해 중복 없이 코드를 간결하게 유지할 수 있음.

기본 예시

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

// 수정 가능한 필드를 선택적으로 만들고 싶을 때
type PartialUser = {
  [key in "id" | "name" | "age"]?: User[key];
};

이 맵드 타입은 다음과 같은 결과 타입이 됨:

{
  id?: number;
  name?: string;
  age?: number;
}

'keyof`와 결합

type PartialUser = {
  [key in keyof User]?: User[key];
};

keyof User는 "id" | "name" | "age"와 같기 때문에 위와 동일한 결과 타입이 생성됨.

읽기 전용 타입 만들기

type ReadonlyUser = {
  readonly [key in keyof User]: User[key];
};

→ 모든 프로퍼티를 readonly로 변환한 새 타입이 생성됨.

활용 예시

기존 타입을 기반으로:

• 모든 프로퍼티를 선택적(optional) 으로 만들거나,
• 모든 프로퍼티를 읽기 전용(readonly) 으로 만들거나,
• 특정 키만 골라서 부분적으로 정의된 타입을 만들 수 있음.

이러한 방식으로 유지보수와 확장성이 매우 뛰어난 타입 정의가 가능해짐.

요약 정리

• 맵드 타입은 반복되는 타입 정의를 자동화함
• keyof, 인덱스드 엑세스 타입 등과 함께 사용하면 강력한 타입 변환기가 됨
• 실무에서 자주 사용되는 패턴임 (Partial, Readonly, Pick, Record 등이 전부 맵드 타입으로 구현되어 있음)

• keyof 연산자는 객체 타입에서 모든 프로퍼티 키를 문자열 리터럴 유니온 타입으로 추출함.
• 수동으로 "name" | "age" 같은 키 목록을 명시하지 않고, 타입에서 자동 추출할 수 있어 유지보수에 용이함.
• keyof는 타입에만 적용 가능하며, 값에는 사용할 수 없음.
• typeof와 함께 사용하면 실제 변수의 타입 구조로부터 키를 추출하는 것도 가능함.

Keyof 연산자

keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자임.

다음은 keyof 연산자를 사용하는 예시임.

interface Person {
  name: string;
  age: number;
}

function getPropertyKey(person: Person, key: "name" | "age") {
  return person[key];
}

이렇게 키를 명시하면 Person 타입이 바뀔 때마다 "name" | "age"를 함께 바꿔줘야 하는 번거로움이 생김.

interface Person {
  name: string;
  age: number;
  location: string; // 추가됨
}

function getPropertyKey(person: Person, key: "name" | "age" | "location") {
  return person[key];
}

이럴 때 keyof 연산자를 쓰면 유지보수가 쉬워짐.

interface Person {
  name: string;
  age: number;
  location: string;
}

function getPropertyKey(person: Person, key: keyof Person) {
  return person[key];
}

keyof Person의 결과는 "name" | "age" | "location"이 됨.

주의할 점: keyof는 값이 아닌 타입에만 적용할 수 있음.

function getPropertyKey(person: Person, key: keyof person) { // ❌ 오류
  return person[key];
}

Typeof와 Keyof 함께 사용하기

typeof 연산자는 값을 기반으로 타입을 추론할 수 있게 해주는 타입스크립트의 기능임.

const person = {
  name: "이정환",
  age: 27,
  location: "서울"
};

type Person = typeof person;
// Person 타입은 { name: string; age: number; location: string }이 됨

이걸 활용해 keyof와 함께 쓰면 다음과 같이 사용 가능함.

function getPropertyKey(person: typeof person, key: keyof typeof person) {
  return person[key];
}

이렇게 하면 변수의 구조에 따라 자동으로 키 타입이 추출되므로 더 안정적이고 유연한 타입 선언이 가능함.

마지막 요약

• keyof는 타입으로부터 프로퍼티 키들을 추출해 유니온 타입으로 만듦.
• typeof는 변수로부터 타입을 추론함.
• 둘을 함께 사용하면 유지보수와 타입 안정성을 모두 챙길 수 있음.

• 인덱스드 엑세스 타입은 객체, 배열, 튜플에서 특정 속성의 타입을 추출할 때 사용함.
• 문법은 타입명["프로퍼티명"] 또는 타입명[숫자] 형태로 사용함.
• 객체 속성 변경 시 매개변수 타입도 자동 반영 가능함.
• 유효하지 않은 인덱스 사용 시 오류 발생함.
• 배열/튜플의 요소 타입을 추출하여 재사용하거나 제네릭화할 수 있음.

인덱스드 엑세스 타입

인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입임. 객체, 배열, 튜플에 모두 사용할 수 있음.

객체 프로퍼티의 타입 추출

interface Post {
  title: string;
  content: string;
  author: {
    id: number;
    name: string;
    age: number;
  };
}

function printAuthorInfo(author: Post["author"]) {
  console.log(`${author.id} - ${author.name}`);
}

• Post["author"]는 Post 타입에서 author 프로퍼티의 타입을 추출함.
• 인덱스는 문자열 리터럴 타입만 가능하며, 변수 사용은 불가함.

const authorKey = "author";
function printAuthorInfo(author: Post[authorKey]) { // ❌ 오류 발생
  console.log(`${author.id} - ${author.name}`);
}

• 존재하지 않는 프로퍼티에 접근하려고 하면 오류 발생함.

중첩 접근도 가능함.

function printAuthorInfo(authorId: Post["author"]["id"]) {
  console.log(authorId);
}

배열 요소 타입 추출

type PostList = Post[];
const post: PostList[number] = {
  title: "게시글 제목",
  content: "게시글 본문",
  author: {
    id: 1,
    name: "이정환",
    age: 27,
  },
};

• PostList[number]는 배열의 요소 타입을 추출함.
• PostList[0]처럼 숫자 리터럴을 써도 동일하게 동작함.

튜플의 요소 타입 추출

type Tup = [number, string, boolean];

type Tup0 = Tup[0]; // number
type Tup1 = Tup[1]; // string
type Tup2 = Tup[2]; // boolean
type Tup3 = Tup[number]; // number | string | boolean

• 튜플에 number 인덱스를 넣으면 모든 요소의 유니온 타입이 추출됨.

요약

• 인덱스드 엑세스 타입은 객체나 배열/튜플에서 타입을 추출하여 재사용할 때 유용함.
• 중복 정의를 피하고 타입 변화에 유연하게 대응할 수 있음.
• 배열 요소 타입은 [number], 튜플은 [숫자] 또는 [number]로 유니온 처리됨.

타입스크립트에서 타입 조작이란 기존 타입(기본 타입, 인터페이스, 타입 별칭 등)을 상황에 따라 동적으로 변형하는 기능을 의미함. 주요 도구로는 인덱스드 엑세스 타입, keyof 타입, 맵드 타입, 템플릿 리터럴 타입 등이 있으며, 제네릭 또한 타입 조작의 일부로 볼 수 있음. 이 기능들은 실무에서 유용하게 사용되며, 코드의 재사용성과 유연성을 크게 향상시킴.

타입 조작이란

타입을 조작한다는 것은 기존의 기본 타입이나 별칭, 인터페이스로 만들어진 타입들을 상황에 따라 유동적으로 다른 타입으로 변형하는 기능임. 이는 타입스크립트의 강력하고 독특한 기능 중 하나임.

이전에 배운 제네릭 또한 함수나 인터페이스, 타입 별칭, 클래스 등에 적용해서 상황에 따라 달라지는 타입을 정의할 수 있기 때문에 타입 조작 기능의 일종임. 다만 그 내용이 방대해 따로 분리해 학습했음.

타입스크립트는 제네릭 외에도 여러가지 타입 조작 기능을 제공함. 이번 섹션에서는 제네릭과 다음에 다룰 조건부 타입을 제외한 4가지 대표적 타입 조작 기능을 정리함:

1. 인덱스드 엑세스 타입

객체, 배열, 튜플 등의 타입에서 특정 프로퍼티나 요소의 타입만 추출할 수 있게 함.
예시: type NameType = User["name"] → User 타입의 name 프로퍼티 타입만 따로 추출함.

2. keyof 타입

객체 타입 내의 프로퍼티 이름들을 문자열 리터럴 유니온 타입으로 추출함.
예시: type UserKeys = keyof User → "name" | "age" | "email" 같은 유니온 타입이 됨.

3. 맵드 타입

기존 객체 타입을 기반으로 새로운 객체 타입을 정의함. 자바스크립트의 map 함수와 유사한 역할을 함.
예시: 모든 프로퍼티를 optional 하게 바꾸는 타입을 정의할 수 있음.
type Partial<T> = { [P in keyof T]?: T[P] }

4. 템플릿 리터럴 타입

기존 문자열 리터럴 타입을 기반으로 정해진 패턴의 문자열만 포함하는 타입을 만들 수 있음.
예시:
type Color = "red" | "blue"
type BrightColor = \bright-${Color}`→ "bright-red" | "bright-blue"

이러한 기능들은 단순한 문법 외에도, 실무에서 어떤 상황에 이 기능을 써야 효과적인지를 이해하는 것이 중요함. 각 기능들은 심플하지만 실전에서 자주 쓰일 수 있는 예제들과 함께 학습할 예정임.

요약

• 타입 조작이란 기존 타입들을 변형하여 새로운 타입을 만들어내는 기능임.
• 대표적 조작 도구: 인덱스드 엑세스 타입, keyof, 맵드 타입, 템플릿 리터럴 타입.
• 제네릭도 타입 조작의 일종으로 간주함.
• 이런 기능들은 코드의 유연성, 재사용성, 안전성을 높이는데 매우 유용함.

• Promise<T>는 제네릭 클래스로, resolve의 결과값 타입을 T로 설정할 수 있다.
• reject의 값은 타입을 지정할 수 없으며, 기본적으로 unknown이다.
• then() 메서드는 resolve 값을, catch() 메서드는 reject 값을 다룬다.
• 함수의 반환 타입으로 Promise<타입>을 명시하여 비동기 작업의 결과 타입을 선언할 수 있다.

Promise 사용하기

Promise는 제네릭 클래스로 구현되어 있다. 따라서 새로운 Promise를 생성할 때 다음과 같이 타입 변수에 할당할 타입을 직접 설정해 주면 해당 타입이 바로 resolve 결과값의 타입이 됨.

const promise = new Promise<number>((resolve, reject) => {
  setTimeout(() => {
    // 결과값 : 20
    resolve(20);
  }, 3000);
});

promise.then((response) => {
  // response는 number 타입
  console.log(response);
});

promise.catch((error) => {
  if (typeof error === "string") {
    console.log(error);
  }
});

❗ reject 함수에 전달된 값의 타입은 지정할 수 없고, 타입스크립트에서는 기본적으로 unknown으로 처리되므로, catch에서 타입 좁히기를 통해 안전하게 다뤄야 함.

함수에서 Promise 반환

어떤 함수가 Promise 객체를 반환한다면 함수의 반환 타입으로 Promise<타입>을 지정해야 함.

function fetchPost() {
  return new Promise<Post>((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: 1,
        title: "게시글 제목",
        content: "게시글 본문",
      });
    }, 3000);
  });
}

또는 더 명확하게 반환 타입을 다음과 같이 직접 명시해도 됨.

function fetchPost(): Promise<Post> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: 1,
        title: "게시글 제목",
        content: "게시글 본문",
      });
    }, 3000);
  });
}

요약

• Promise<T>는 비동기 작업의 성공 결과를 T로 선언할 수 있도록 해주는 제네릭 클래스이다.
• reject() 결과값은 unknown으로 취급되므로 타입 확인이 필요하다.
• 함수 반환 타입으로 Promise<타입>을 사용하면 타입 안정성이 높아진다.

class NumberList {
  constructor(private list: number[]) {}

  push(data: number) {
    this.list.push(data);
  }

  pop() {
    return this.list.pop();
  }

  print() {
    console.log(this.list);
  }
}

const numberList = new NumberList([1, 2, 3]);

❌ 비효율적인 클래스 중복 정의

StringList도 필요하다면 클래스 정의를 중복하게 됨.

class StringList {
  constructor(private list: string[]) {}

  push(data: string) {
    this.list.push(data);
  }

  pop() {
    return this.list.pop();
  }

  print() {
    console.log(this.list);
  }
}

const numberList = new NumberList([1, 2, 3]);
const stringList = new StringList(["1", "2", "3"]);

이렇게 되면 코드 중복이 심하고 유지보수도 어려워짐.

✅ 제네릭 클래스로 개선하기

다음과 같이 제네릭을 적용해 다양한 타입의 리스트를 처리할 수 있는 범용 클래스를 만들 수 있음.

class List<T> {
  constructor(private list: T[]) {}

  push(data: T) {
    this.list.push(data);
  }

  pop() {
    return this.list.pop();
  }

  print() {
    console.log(this.list);
  }
}

const numberList = new List([1, 2, 3]);
const stringList = new List(["1", "2"]);

🎯 타입 명시적으로 지정하기

타입 추론이 가능하지만 명시적으로 타입을 지정할 수도 있음.

const numberList = new List<number>([1, 2, 3]);
const stringList = new List<string>(["1", "2"]);

이처럼 제네릭 클래스는 코드 중복을 줄이고 다양한 타입을 유연하게 처리할 수 있어 효율적.

• 제네릭은 인터페이스, 타입 별칭, 함수 등에 적용 가능
• 제네릭 인터페이스는 다양한 타입을 유연하게 표현할 수 있음
• 인덱스 시그니처, 유니온 타입, 조건 분기, 함수 매개변수 제한 등 실용도가 높음
• 타입 추론은 불가하므로 반드시 타입 인자를 명시해야 함

📌 기본 제네릭 인터페이스

interface KeyPair<K, V> {
  key: K;
  value: V;
}

let keyPair: KeyPair<string, number> = {
  key: "key",
  value: 0,
};

let keyPair2: KeyPair<boolean, string[]> = {
  key: true,
  value: ["1"],
};

📌 인덱스 시그니처 + 제네릭

interface Map<V> {
  [key: string]: V;
}

let stringMap: Map<string> = {
  key: "value",
};

let booleanMap: Map<boolean> = {
  key: true,
};

📌 제네릭 타입 별칭

type Map2<V> = {
  [key: string]: V;
};

let stringMap2: Map2<string> = {
  key: "string",
};

✅ 제네릭 인터페이스 활용 예

타입 정의

interface Student {
  type: "student";
  school: string;
}

interface Developer {
  type: "developer";
  skill: string;
}

제네릭 적용 전

interface User {
  name: string;
  profile: Student | Developer;
}

function goToSchool(user: User) {
  if (user.profile.type !== "student") {
    console.log("잘 못 오셨습니다");
    return;
  }

  const school = user.profile.school;
  console.log(`${school}로 등교 완료`);
}

제네릭 적용 후

interface User<T> {
  name: string;
  profile: T;
}

function goToSchool(user: User<Student>) {
  const school = user.profile.school;
  console.log(`${school}로 등교 완료`);
}

const developerUser: User<Developer> = {
  name: "이정환",
  profile: {
    type: "developer",
    skill: "TypeScript",
  },
};

const studentUser: User<Student> = {
  name: "홍길동",
  profile: {
    type: "student",
    school: "가톨릭대학교",
  },
};

✅ 마무리

제네릭 인터페이스는 객체 설계 시
다양한 타입을 유연하고 안전하게 다룰 수 있게 해주는 도구다.
함수, 타입 별칭, 조건 분기, 인덱스 구조 등과 조합하여 쓰면 매우 강력하다.

• map과 forEach 메서드는 배열의 각 요소에 콜백을 적용하는 대표적인 고차함수
• map: 반환값을 기반으로 새로운 배열 생성
• forEach: 반환값 없이 순회 목적으로 사용
• 타입스크립트에서는 제네릭 타입을 사용해 다양한 타입에 대응 가능
• map의 경우 원본 배열과 다른 타입으로도 매핑 가능하므로 타입 변수를 2개 사용함

📌 map 기본 구조

const arr = [1, 2, 3];
const newArr = arr.map((it) => it * 2);
// 결과: [2, 4, 6]

❌ 일반 함수 버전

function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {
  // ...
}

• 타입 안정성이 없음
• 콜백 반환값이나 요소 타입 추론 불가

✅ 제네릭 map 함수 - 1차 버전

function map<T>(arr: T[], callback: (item: T) => T): T[] {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map([1, 2, 3], (it) => it * 2); // ✅ [2, 4, 6]
map([1, 2, 3], (it) => it.toString()); // ❌ 오류

• T가 number로 고정되므로, string 반환 시 타입 충돌

✅ 제네릭 map 함수 - 2차 개선 버전

function map<T, U>(arr: T[], callback: (item: T) => U): U[] {
  let result: U[] = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map([1, 2, 3], (it) => it.toString()); // ✅ ["1", "2", "3"]
map(["a", "b", "c"], (it) => it.length); // ✅ [1, 1, 1]

• 입력 타입 T, 반환 타입 U 분리
• 훨씬 유연한 타입 추론이 가능해짐

📌 forEach 기본 구조

const arr2 = [1, 2, 3];
arr2.forEach((it) => console.log(it));
// 출력: 1, 2, 3

✅ 제네릭 forEach 함수

function forEach<T>(arr: T[], callback: (item: T) => void) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]);
  }
}

• 반환값이 없으므로 void 반환 타입 지정
• map보다 간단하고 안전하게 동작

forEach(["a", "b", "c"], (item) => {
  console.log(item.toUpperCase());
});

✅ 마무리 정리

제네릭을 활용하면 다양한 타입의 데이터에 대해
안정적인 타입 추론과 오류 방지가 가능해진다.

• 제네릭은 타입의 재사용성과 정확성을 높이기 위해 사용됨
• 타입 변수는 여러 개(T, U 등) 동시에 사용할 수 있음
• 배열, 튜플 등 다양한 타입 구조에 활용 가능
• extends를 사용하면 타입 변수에 제한(제약 조건)을 걸 수 있음
• 활용 방법에 따라 타입 추론 정확도와 타입 안정성이 크게 향상됨

📌 사례 1: 두 개의 타입 변수 사용

function swap<T, U>(a: T, b: U) {
  return [b, a];
}

const [a, b] = swap("1", 2);
// a: number, b: string

• T = string, U = number로 추론됨
• 여러 타입을 동시에 사용할 수 있음

📌 사례 2: 제네릭 배열

function returnFirstValue<T>(data: T[]) {
  return data[0];
}

let num = returnFirstValue([0, 1, 2]); 
// number

let str = returnFirstValue([1, "hello", "mynameis"]); 
// number | string

• T[]를 매개변수 타입으로 설정하면 T는 요소의 타입으로 추론됨
• 혼합된 타입 배열의 경우 T는 number | string

📌 사례 3: 튜플 타입으로 첫 번째 요소 추론

function returnFirstValue<T>(data: [T, ...unknown[]]) {
  return data[0];
}

let str = returnFirstValue([1, "hello", "mynameis"]);
// number

• 첫 번째 요소의 타입만 T로 고정
• 나머지 요소는 어떤 타입이든 상관없음 (...unknown[])

📌 사례 4: 타입 변수 제한 (extends)

function getLength<T extends { length: number }>(data: T) {
  return data.length;
}

getLength("123");            // ✅ OK
getLength([1, 2, 3]);        // ✅ OK
getLength({ length: 1 });    // ✅ OK
getLength(undefined);        // ❌ 오류
getLength(null);             // ❌ 오류

• T extends { length: number }는 T가 최소한 length 프로퍼티를 가지고 있어야 함
• 타입 안정성을 위해 필요한 제약 조건

✅ 마무리

제네릭은 단순히 타입을 일반화하는 것이 아니라
상황에 맞는 타입 정확성과 제한을 추가하는 도구이다.
적절히 활용하면 코드의 안정성과 유연성이 크게 향상된다.

C++의 템플릿 함수와 동일. 로 입력된 타입에 따라 자동 추론

• 제네릭(Generic)은 함수, 클래스, 타입 등을 다양한 타입과 함께 동작하도록 만들어주는 기능
• any나 unknown으로는 타입 안정성을 완전히 확보하기 어려움
• 제네릭을 사용하면 입력된 타입에 따라 반환 타입을 자동으로 지정할 수 있음
• 호출 시 직접 타입을 명시할 수도 있고, 대부분은 자동 추론됨
• 코드의 재사용성과 타입 안정성을 동시에 확보할 수 있음

📌 제네릭이 필요한 상황

function func(value: any) {
  return value;
}

let num = func(10);       // any 타입
let str = func("string"); // any 타입

num.toUpperCase(); // 런타임 오류 발생 가능 (컴파일러가 감지 못함)

❓ unknown을 사용한 경우

function func(value: unknown) {
  return value;
}

let num = func(10);
let str = func("string");

num.toFixed(); // ❌ 오류

→ unknown은 안전하지만 사용 전 타입 좁히기 필요. 귀찮고 불편하다.

💡 우리가 원하는 것

• 전달한 인수의 타입이 그대로 반환 타입으로 반영되기를 원함

✅ 제네릭 함수로 해결

function func<T>(value: T): T {
  return value;
}

let num = func(10);         // number 타입
let str = func("string");   // string 타입

• <T>: 타입 변수를 선언
• T는 함수 호출 시 결정됨 (여기선 number, string)

✍ 타입을 명시적으로 지정하기

function func<T>(value: T): T {
  return value;
}

let arr = func<[number, number, number]>([1, 2, 3]);

• T에 튜플 타입을 직접 지정함
• 타입스크립트는 일반적으로 number[]로 추론하므로, 정밀한 타입 추론이 필요할 땐 직접 명시

📌 요약

• any는 너무 느슨하고, unknown은 너무 엄격함
• 제네릭은 타입을 입력값에 맞춰 자동으로 설정해줌
• <T>와 같은 타입 변수 사용
• 함수, 클래스, 인터페이스 등 여러 곳에서 활용 가능
• 명시적으로 타입을 넘길 수도 있고, 자동 추론도 대부분 잘 작동함

제네릭은 타입스크립트의 가장 강력한 기능 중 하나로,
안정성과 유연성을 동시에 만족시킬 수 있는 패턴이다.

c++, java랑 동일.

• 인터페이스는 클래스가 따라야 할 구조를 명시함
• implements를 사용해 클래스가 특정 인터페이스를 구현하게 할 수 있음
• 인터페이스에 명시된 필드/메서드는 클래스에서 모두 구현해야 함
• 접근 제어자 public인 필드만 인터페이스 조건을 만족함

✅ 인터페이스와 클래스

타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있다.
클래스가 어떤 필드와 메서드를 가져야 하는지 명확히 정의할 수 있다.

📌 기본 구조

interface CharacterInterface {
  name: string;
  moveSpeed: number;
  move(): void;
}

CharacterInterface는 다음 3가지를 요구한다:

• name: 문자열
• moveSpeed: 숫자
• move(): 반환값이 없는 함수

✍ 클래스에서 인터페이스 구현

인터페이스를 클래스에 적용하려면 implements 키워드를 사용한다.

class Character implements CharacterInterface {
  constructor(
    public name: string,
    public moveSpeed: number,
    private extra: string
  ) {}

  move(): void {
    console.log(`${this.moveSpeed} 속도로 이동!`);
  }
}

• implements를 사용하면, 클래스는 해당 인터페이스를 완전히 구현해야 한다.
• public으로 선언된 필드는 인터페이스 요구사항을 만족시킨다.
• extra 필드는 private이기 때문에 인터페이스에 없어도 무관하다.

인터페이스 기반 설계를 활용하면 코드의 일관성과 가독성, 그리고 유지보수성이 크게 향상된다.

c++ 접근 제어자와 거의 동일 다른 점은 멤버 변수 앞에 private나 protected를 각각 붙혀서 사용. 접근 제어자는 생성자 매개변수에 직접 설정 가능하다.
이 경우 필드 선언과 초기화 코드를 생략할 수 있다.

• 접근 제어자는 public, private, protected 세 가지가 있음
• public: 어디서든 접근 가능 (기본값)
• private: 클래스 내부에서만 접근 가능
• protected: 클래스 내부 + 파생 클래스에서만 접근 가능
• 생성자 매개변수에 접근 제어자를 붙이면 필드 선언 및 초기화가 자동으로 이루어짐
• 접근 제어자 사용 시 코드 간결성과 정보 은닉성이 향상됨

타입스크립트 접근 제어자

✅ 접근 제어자란?

타입스크립트에서 제공하는 기능으로,
클래스의 필드나 메서드에 대해 외부에서의 접근 범위를 설정할 수 있다.

사용 가능한 접근 제어자는 다음 세 가지이다:

• public: 어디서든 접근 가능 (기본값)
• private: 클래스 내부에서만 접근 가능
• protected: 클래스 내부 또는 파생 클래스에서만 접근 가능

📌 public (기본 접근 제어자)

class Employee {
  name: string;
  age: number;
  position: string;

  constructor(name: string, age: number, position: string) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  work() {
    console.log("일함");
  }
}

const employee = new Employee("이정환", 27, "developer");

employee.name = "홍길동";      // ✅ 가능
employee.age = 30;            // ✅ 가능
employee.position = "디자이너"; // ✅ 가능

명시적으로 public을 붙여도 결과는 동일하다.

🔐 private

class Employee {
  private name: string;
  public age: number;
  public position: string;

  constructor(name: string, age: number, position: string) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  work() {
    console.log(`${this.name}이 일함`);
  }
}

const employee = new Employee("이정환", 27, "developer");

employee.name = "홍길동"; // ❌ 오류: private 접근 불가
employee.age = 30;        // ✅

private 필드는 클래스 외부에서 접근이 불가하다.
단, 클래스 내부 메서드에서는 사용 가능하다.

🛡 protected

class Employee {
  private name: string;
  protected age: number;
  public position: string;

  constructor(name: string, age: number, position: string) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  work() {
    console.log(`${this.name}이 일함`);
  }
}

class ExecutiveOfficer extends Employee {
  func() {
    this.age;  // ✅ protected 접근 가능
    this.name; // ❌ private 접근 불가
  }
}

const employee = new Employee("이정환", 27, "developer");

employee.age = 30;   // ❌ 외부 접근 불가
employee.position = "디자이너"; // ✅

✍ 생성자에서 필드 생략하기

접근 제어자는 생성자 매개변수에 직접 설정 가능하다.
이 경우 필드 선언과 초기화 코드를 생략할 수 있다.

class Employee {
  constructor(
    private name: string,
    protected age: number,
    public position: string
  ) {}

  work() {
    console.log(`${this.name} 일함`);
  }
}

위 코드에서 this.name = name 같은 코드가 없어도
자동으로 필드 선언 + 초기화가 함께 이루어진다.