📘 타입스크립트 개념 정리12

🌱 타입스크립트 타입 조작 정리

1️⃣ 인덱스 액세스 타입 (Index Access Type)

👉 핵심 개념

“객체 타입에서 특정 값 타입만 꺼내쓰기”

📌 예시 (쉽게 바꿔서 설명)

interface User {
  name: string;
  age: number;
  address: {
    city: string;
    zip: number;
  };
}

✅ 특정 타입 꺼내기

type UserName = User['name']; // string
type UserAddress = User['address']; // { city: string; zip: number }
type UserCity = User['address']['city']; // string

👉 해석

• User['name'] → name 타입 꺼냄
• User['address'] → address 객체 통째로
• User['address']['city'] → city만 꺼냄

✅ 함수에서 활용

function printUser(user: User['address']) {
  console.log(user.city);
}

👉 의미

• “User 타입 안에 있는 address 구조 그대로 받겠다”

⚠️ 실수 포인트

❌ 잘못된 생각

User[name] // ❌ (문자열 아님)

✅ 올바른 방법

User['name'] // ⭕️ 문자열로 써야 함

2️⃣ 배열에서 타입 꺼내기

👉 핵심

배열 안 "요소 하나의 타입" 꺼내기

📌 예시

type ProductList = {
  name: string;
  price: number;
}[];

✅ 요소 타입 꺼내기

type Product = ProductList[number];

👉 해석

“배열 안에 있는 요소 타입 하나

✅ 활용

function printProduct(product: ProductList[number]) {
  console.log(product.name);
}

3️⃣ 튜플 타입

type MyTuple = [number, string, boolean];

✅ 특정 요소 타입

type A = MyTuple[0]; // number
type B = MyTuple[1]; // string

✅ 전체 타입 유니온

type All = MyTuple[number]; 
// number | string | boolean

👉 의미

“튜플 안에 들어있는 모든 타입 합치기”

4️⃣ keyof 연산자

👉 핵심

“객체의 key만 뽑아서 타입으로 만들기”

📌 예시

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

✅ key 추출

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

✅ 함수 활용 (중요🔥)

function getValue(obj: Person, key: keyof Person) {
  return obj[key];
}

👉 의미

• key는 "name" 또는 "age"만 가능
• 안전하게 접근 가능

⚠️ 실수 포인트

❌

keyof person // ❌ (값이라서 안됨)

✅

keyof Person // ⭕️ 타입만 가능
💡 typeof와 같이 쓰기
const person = {
  name: '민지',
  age: 20,
};

type PersonType = typeof person;

function getValue(obj: PersonType, key: keyof typeof person) {
  return obj[key];
}

5️⃣ Mapped 타입 (🔥실무 핵심🔥)

👉 핵심

“기존 타입을 기반으로 새로운 타입 만들기”

📌 예시

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

✅ 모든 값을 boolean으로 바꾸기

type BooleanUser = {
  [key in keyof User]: boolean;
};

👉 결과

{
  id: boolean;
  name: boolean;
  age: boolean;
}

✅ readonly 만들기

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

👉 수정 불가능

💡 실제 사용 이유

function fetchUser(): ReadonlyUser {
  return {
    id: 1,
    name: '민지',
    age: 20,
  };
}

👉 데이터를 보호하기 위해 사용

✅ 일부만 수정 가능하게 만들기

(실무에서 많이 씀🔥)

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

👉 결과

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

6️⃣ 템플릿 리터럴 타입

👉 핵심

“문자열 패턴 만들기”

📌 예시

type Fruit = 'apple' | 'banana';
type Color = 'red' | 'yellow';

✅ 조합 만들기

type FruitColor = `${Color}-${Fruit}`;

👉 결과

"red-apple"
"red-banana"
"yellow-apple"
"yellow-banana"

💥 핵심 요약
| 개념 | 한줄 요약 |
| ---------- | ----------- |
| 인덱스 타입 | 객체에서 타입 꺼내기 |
| 배열[number] | 요소 타입 꺼내기 |
| keyof | key만 뽑기 |
| mapped | 타입 변형 |
| 템플릿 타입 | 문자열 조합 |

⚠️ 많이 하는 실수

1. 값 vs 타입 구분 못함

• ❌ keyof person
• ✅ keyof typeof person

2. 인덱스에 따옴표 안씀

• ❌ User[name]
• ✅ User['name']

3. 배열 타입 착각

• ❌ ProductList[0] (타입 아님)
• ✅ ProductList[number]

🎯 한줄 정리

👉 타입 조작은
"이미 있는 타입을 꺼내고, 바꾸고, 조합하는 기술"