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

✅ 1. 제네릭 (Generics) 핵심 개념

👉 한 줄 정의

“타입을 나중에 정하는 함수/타입” 즉, 제네릭 = "상자" 라고 생각하기
함수가 아니라 "타입 시스템" 👉 실행이 아니라 타입 체크용

function box<T>(item: T): T {
  return item;
}

📌 핵심 특징

• 타입을 변수처럼 사용
• 호출 시 타입 결정됨
• 재사용성 증가

👉 의미

• T = “아직 뭔지 모르는 타입”
• 나중에 넣는 값으로 결정됨

✔ 여기서 = 타입 변수 (임시 타입)

💡 왜 쓰냐?

기존 방식 ❌

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

👉 문제: any 쓰면 타입 정보 다 사라짐

제네릭 사용 ⭕

  
let appleBox = box("apple");   // string
let numberBox = box(100);      // number
let boolBox = box(true);       // boolean
  

👉 핵심
넣는 값에 따라 타입이 자동으로 바뀜 -> 자동으로 타입 맞춰줌 (타입 추론)

📌 제네릭 장점

• any 대신 사용 → 타입 안정성 증가
• 재사용성 높은 코드 작성 가능

✅ 2. 제네릭 핵심 (중요🔥)

👉 함수 호출할 때 타입이 결정됨

func<number>(10)
func<string>("hello")

👉 보통은 자동 추론됨

func(10) // number 자동

✅ 3. 튜플로 정확하게 타입 고정

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

👉 그냥 숫자 배열

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

👉 의미

길이 = 3개 고정
순서까지 고정

👉 왜 쓰냐?
👉 “정확하게 구조를 지키고 싶을 때”
👉 튜플 → 길이까지 고정됨

✅ 4. 제네릭 응용 1 - swap

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

👉 서로 다른 타입도 가능

swap("1", 2) // [2, "1"]

🎁 실생활 느낌

let result = swap("커피", 5000);

👉 결과

[5000, "커피"]

👉 의미

T = string
U = number

✅ 5. 제네릭 응용 2 - 첫번째 값 가져오기

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

👉 핵심

[T, ...unknown[]] = 첫번째는 T, 나머지는 아무거나

first(["사과", "바나나"]); // "사과"
first([10, 20, 30]);       // 10

💡 왜 튜플 쓰냐?

first([1, "hello", true])

👉 T = number | string | boolean ❌

👉 튜플 쓰면
👉 첫 번째 값 기준으로 타입 고정

✅ 6. 제네릭 제한 (extends) ⭐⭐⭐

👉 중요!!

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

👉 의미

• length 있는 애만 받아라

  getLength([1,2,3])   // 가능
  getLength("hello")   // 가능
  getLength(10)        // ❌ 에러

✅ 7. map 직접 구현 (핵심 예제🔥)

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

🎁 예시

map([1,2,3], (x) => x * 10)
// [10, 20, 30]

map(["a","b"], (x) => x + "👍")
// ["a👍", "b👍"]

interface MyMap<V> {
[key: string]: V;
}
let scores: MyMap<number> = {
math: 100,
english: 90
};

👉 핵심
key는 string, value는 내가 정함

👉 핵심 구조

타입	의미
T	입력 타입
U	결과 타입

✅ 8. forEach 구현

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

   forEach([1,2,3], (x) => {
  console.log(x);
});                              
                                 

👉 반환값 없음 → void

✅ 9. 제네릭 인터페이스

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

let user: Data<string, number> = {
  key: "age",
  value: 20
};

✅ 10. 인덱스 시그니처 + 제네릭

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

let stringMap: Map<string> = {
a: "hello"
};

👉 value 타입만 바꿀 수 있음

✅ 11. 제네릭 클래스

class Box<T> {
 constructor(private items: T[]) {}

 add(item: T) {
   this.items.push(item);
 }
}
 
let numberBox = new Box<number>([1,2]);
numberBox.add(3);

let stringBox = new Box<string>(["a"]);
stringBox.add("b");

👉 클래스도 타입 바뀜

✅ 12. Promise 제네릭 (비동기 핵심)⭐⭐⭐

const promise = new Promise<number>((resolve) => {
 resolve(100);
});

👉 의미

resolve 결과 타입 = number

promise.then(res => {
res *2 // 가능
});

✅ 13. Promise 함수

interface Post {
id: number;
title: string;
}

function fetchPost(): Promise<Post> {
return new Promise((resolve) => {
  resolve({
    id: 1,
    title: "게시글"
  });
});
}