12. 🟦 TypeScript - 옵셔널(Optional) & 제네릭(Generic) 정리

function abc(a: number, b?: number, c?: number) {}
abc(1); // 전부 가능하다
abc(1, 2); // 전부 가능하다
abc(1, 2, 3); // 전부 가능하다

// 제한없이 입력을 받고 싶은 경우
function abc(...args: number[]) {}
abc(1, 2, 3, 4);

// type alias에서 옵셔널 사용
type User = {
	id: number;
	nickname?: string; // 있어도 되고 없어도 됨
};
 
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: "sunbin" };

// interface의 옵셔널 사용
 
interface Product {
	name: string;
	price?: number;
}
 
const p1: Product = { name: "Book" };
const p2: Product = { name: "Bag", price: 50 };

class Person {
	name: string;
	age?: number;
 
	constructor(name: string, age?: number) {
		this.name = name;
		if (age !== undefined) {
			this.age = age;
		}
	}
}
 
let obj: { a: string; b?: string } = { a: "hello", b: "world" };
obj = { a: "hello" }; // b가 있어도 그만 없어도 그만,

function add(x: string | number, y: string | number): string | number {
	return x + y;
}
 
// 타입스크립트는 모든 경우를 다 고려하기 때문에 2 * 2의 모든 상황을 고려
// 결과를 이렇게 만들것으로 생각 하고 만들었지만,
add(1, 2); // 3
add("1", "2"); //12
 
// 이런 모든 케이스들에 대해서도 고려하기 때문에 올바른 함수라고 볼 수 없음
add(1, "2"); //12
add("1", 2); //12

// 동일한 갯수의 매개변수는 오버 로딩 불가능
function add(x: string, y: string): string;
function add(x: number, y: number): number;

// 제너릭
// 동일 타입을 사용하고,
// T라고 표기해 두었지만, 어떤 문자로든 다 기입 가능하다.
function add<T>(x: T, y: T): T {
	return x + y;
}
 
// 제너릭은 함수를 사용할때 타입이 정해질 수 있게 사용한다.
add(1, 2);
add("1", "2");
add<number>(1, 2);
add<string>("1", "2");
 
// 여전히 오류
// add(1, "2") // ❌ 타입 불일치 에러

// 범위가 너무 넓다고 판단될 경우, T에 제한을 둘수 있다.
function add<T extends string>(x: T, y: T): T {
	return x + y;
}
 
// 매개변수 만은 같은 타입이 들어갈 수 있도록 할 수 있다.
function add<T extends string | number>(x: T, y: T): T {
	return x + y;
}
 
// 여러 개의 제너릭도 사용 가능하다.
function add<T extends string | number, K extends string>(x: T, y: T): T {
	return x + y;
}

function a<T>() {}
class B<T>() {}
interface C<T> {}
type D<T> = {};
const e = <T>() => {};

// 특정 객체
// <T extends {...}>
 
function printA<T extends { a: string }>(obj: T): void {
	// ✅ TypeScript only: obj must have string `a`
	console.log(obj.a);
}
 
printA({ a: "hello" }); // ✅ OK
printA({ a: "world", extra: 123 }); // ✅ OK
// printA({ b: "oops" });              // ❌ TS error: a가 없음

// 모든 배열
// <T extends any[]>
function getList<T extends string[]>(x: T): T {
	return x;
}
getList(["1", "2", "3"]);
 
function getFirst<T extends any[]>(arr: T): T[number] {
	// ✅ TypeScript only: 배열의 요소 타입을 자동 추론함
	return arr[0];
}
 
const x = getFirst(["a", "b"]); // string 추론됨
const y = getFirst([1, 2, 3]); // number 추론됨

// 함수 타입
// <T extends (...args: any) => any> // 모든 함수
// (...args: any) => any 모든 함수 입력 (any를 써도 되는 유일한 예외)
// 입력받는 콜백 함수의 형태를 지정한다.
function add<T extends (a: string) => number>(x: T): T {
	return x;
}
 
function useCallback<T extends (...args: any[]) => any>(fn: T): void {
	// ✅ TypeScript only: fn은 함수 타입이어야 함
	fn(); // args 없으면 undefined로 호출됨
}
 
useCallback(() => console.log("hello")); // OK
 
// 입력 형태 고정
function runCallback<T extends (msg: string) => void>(fn: T): void {
	fn("TypeScript");
}
 
runCallback((text) => console.log(text.length)); // OK

// 생성자 타입
// <T extends abstract new (...args: any) => any>
 
function add<T extends abstract new (...args: any) => any>(x: T): T {
	return x;
}
 
// 클래스 자체를 넣고 싶을때
class A {}
add(A);
add(new A()); // 오류
 
function create<T extends abstract new (...args: any[]) => any>(Ctor: T): InstanceType<T> {
	// ✅ TypeScript only: 생성자로만 호출 가능
	return new Ctor();
}
 
class MyClass {
	msg = "hi";
}
 
const obj = create(MyClass);
console.log(obj.msg); // "hi"

// <T extends keyof any> // string | number | symbol
// 모든 키들을 받고 싶을때
 
function logKey<T extends keyof any>(key: T) {
	// ✅ TypeScript only: 키 타입만 허용 (string | number | symbol)
	console.log(`Key is: ${String(key)}`);
}
 
logKey("name"); // ✅ OK
logKey(42); // ✅ OK
logKey(Symbol("id")); // ✅ OK

const sym1 = Symbol("id");
const sym2 = Symbol("id");
 
console.log(sym1 === sym2); // false ❗ 서로 다름
 
// 사용예제
// 객체 키로 사용:
const id = Symbol("id");
 
const user = {
	name: "sunbin",
	[id]: 12345
};
 
console.log(user[id]); // 12345