13. 🟦 TypeScript - 기본값(Default Value) & 제네릭 기본값 정리

📌 1. 매개변수 기본값 (Default Parameter)

✅ 기본값 설정 시 타입 추론

타입스크립트는 b와 c를 자동으로 number로 추론함
명시적 타입 선언이 없어도 가능하지만, 명확성을 위해 타입 지정 권장


// 기본값을 가지고 타입 추론
const a = (b = 3, c = 4) => {
	return 3;
};

✅ 명시적으로 타입 붙이기


// 타입 붙이기
const a = (b: number = 3, c: number = 4) => {
	return 3;
};

✅ 객체 타입 매개변수 기본값


const a = (b: { children: string } = { children: "sunbin" }) => {
	return;
};

📌 2. 제네릭 기본값

✅ 리액트 사용 시 주의

❗ React JSX 환경에서는 <T>를 <div>로 오해할 수 있어 파서 에러 발생 가능
- ➤ TSX 파일에서는 반드시 쉼표를 붙이거나 명확하게 제약해야 함


// const add =  <T>(x:T, y:T) => ({x ,y});
const add = <T>(x: T, y: T) => ({ x, y });

✅ 제네릭에 기본값 지정

T의 기본 타입을 unknown으로 설정

호출 시 명시된 타입이 없으면 T는 unknown으로 추론됨


// 제너릭에 기본값을 넣어서 처리함
const add = <T = unknown>(x: T, y: T) => ({ x, y });

✅ 쉼표를 붙여 구문 충돌 방지 (TSX 대응)

<T,>


const add = <T>(x: T, y: T) => ({ x, y });
 
// 타입스크립트가 내용을 확인하고, 타입을 다시 덮어써서
const add = <T extends unknown>(x: T, y: T) => ({ x, y });
add(1, 2); //를 호출한다면, number를 호출한 것으로 확인하고 덮어쓰는 과정을 진행 하게 됨