[TS] 타입 조작하기

---

01

타입 조작 (Type Manipulation)이란?

타입 조작(Type Manipulation)은 기존에 정의된 타입을 변형하거나 조합하여 더 유연하게 활용하는 기술입니다. 

예를 들어:

• 특정 객체 타입에서 일부 속성만 추출하기
• 기존 타입을 선택적(optional) 속성으로 변환하기
• 문자열 조합을 활용한 새로운 타입 만들기

타입스크립트에서 지원하는 주요 타입 조작 기능은 다음과 같습니다.

1. 인덱스드 액세스 타입 – 객체, 배열, 튜플에서 특정 요소의 타입만 추출하기
2. Keyof 타입 – 객체의 키 값을 유니온 타입으로 변환하기
3. 맵드 타입 – 기존 타입을 기반으로 새로운 타입 생성하기
4. 템플릿 리터럴 타입 – 문자열 리터럴을 조합하여 새로운 타입 생성하기

---

02

인덱스드 액세스 타입 (Indexed Access Type)

인덱스드 액세스 타입은 객체, 배열, 튜플에서 특정 요소의 타입만 추출하는 기능입니다.

1. 객체에서 특정 프로퍼티의 타입 추출하기

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 속성의 타입을 그대로 가져올 수 있어요.

     따라서 Post 타입이 변경되어도 함수를 수정할 필요가 없습니다!

📌주의할 점

1️⃣ Post [A] 내부에는 타입만 명시할 수 있다.

: 변수나 값은 사용할 수 없으며, 아래와 같은 코드는 오류가 발생한다.

const key = "author";  
function printAuthorInfo(author: Post[key]) {} // ❌ 오류 발생

2️⃣ 존재하지 않는 프로퍼티를 인덱스로 사용하면 오류가 난다.

3️⃣ 특정 프로퍼티 내의 하위 속성을 가져오려면 대괄호를 두 번 사용하면 된다.

function printAuthorInfo(author: Post["author"]["id"]) {} // ✅ id의 타입만 추출

 

2. 배열 요소의 타입 추출하기

type PostList = Post[];
const post: PostList[number] = {
  title: "게시글 제목",
  content: "본문 내용",
  author: {
    id: 1,
    name: "홍길동",
    age: 30,
  },
};

👉 PostList[number]PostList [number]는 배열에서 하나의 요소 타입을 추출하는 역할을 합니다.

 

3. 튜플 요소의 타입 추출하기

type Tup = [number, string, boolean];
type First = Tup[0]; // number
type Second = Tup[1]; // string
type All = Tup[number]; // number | string | boolean

👉 Tup[number]Tup [number]를 사용하면 튜플의 모든 요소 타입을 유니온 타입으로 변환할 수 있습니다.

 

---

03

Keyof 연산자

keyof 연산자는 객체 타입에서 모든 키를 유니온 타입으로 추출하는 기능입니다.

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

type PersonKeys = keyof Person; // "name" | "age"

함수에서 활용하면 이렇게 사용할 수 있어요.

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

👉 keyof Person을 사용하면 "name" | "age" 타입이 되어 key로 들어갈 값을 제한할 수 있습니다.

 

번외 1) Typeof 연산자

 

typeof 연산자는 값을 기반으로 타입을 추론할 때 사용된다.

const person = { name: "아무개", age: 29 };

type Person = typeof person; // person의 타입을 추론하여 Person 타입으로 지정

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

번외 2) typeof & keyof 함께 사용하기

typeof 연산자는 값을 기반으로 타입을 추론하고,

keyof 연산자는 객체 타입의 키를 유니온 타입으로 변환하는 역할을 한다.

typeof와 keyof를 함께 사용하면 객체 타입을 자동으로 추론하고, 안전하게 키 값을 참조할 수 있는 함수를 만들 수 있다!

const person = { name: "아무개", age: 29 };

type Person = typeof person; // person 객체의 타입을 추론하여 Person 타입으로 지정

// typeof로 person의 타입을 추출하고, keyof를 사용해 객체의 키를 유니온 타입으로 변환
function getProperty(person: Person, key: keyof typeof person) {
  return person[key];
}

---

04

맵드 타입 (Mapped Type) ⭐

맵드 타입은 기존 객체 타입을 변형하여 새로운 타입을 생성하는 기능입니다.

맵드 타입을 활용하면 중복 없이 기존 타입을 쉽게 변형할 수 있습니다.

👉 인터페이스는 사용 불가능하며(무조건 타입별칭으로 사용), in 연산자를 활용해야 한다.

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

// 기존 타입을 변형하는 맵드 타입 예제
type PartialUser = { [key in "id" | "name" | "age"]: User[key] };

👉 [key in "id" | "name" | "age"]

→ key가 "id", "name", "age" 중 하나로 변하면서 새로운 객체 타입이 생성됨

👉 User [key]

→ 기존 User 타입에서 해당 key에 맞는 타입을 가져옴

• id → number
• name → string
• age → number

✅ 모든 속성을 선택적으로 만들기

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

👉 ?를 추가하면 모든 속성이 선택적(optional) 속성이 됩니다.
📌 User 타입의 속성 중 일부만 선택적으로 사용할 수 있는 타입을 생성할 때 유용!

 

✅모든 속성을 읽기 전용으로 만들기

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

👉 readonly를 추가하면 모든 속성이 변경 불가능한 속성이 된다.
📌 User 객체를 불변(Immutable)하게 만들어야 할 때 사용!

---

05

템플릿 리터럴 타입 (Template Literal Type)

템플릿 리터럴 타입은 문자열 리터럴 타입을 조합해서 새로운 타입을 생성하는 기능입니다.

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

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

👉 ColoredAnimal 타입은 자동으로 "red-dog" | "red-cat" | "red-chicken" | "black-dog"... 형태로 생성됩니다.

 

📌 활용 예시

• 스타일 이름 타입 생성: type ButtonSize = "small" | "medium" | "large";
• API 엔드포인트 정의: type API = /api/${string};

---

06

마무리

타입 조작 기능을 잘 활용하면 더 안전하고 유연한 타입을 설계할 수 있습니다!

기능	설명
인덱스드 액세스 타입	객체, 배열, 튜플에서 특정 요소의 타입 추출
keyof 연산자	객체 타입의 키를 유니온 타입으로 변환
맵드 타입	기존 타입을 변형하여 새로운 타입 생성
템플릿 리터럴 타입	문자열 리터럴을 조합하여 새로운 타입 생성