04. 🟦 TypeScript - type, interface, union, intersection 정리

type TypeA = { a: string };
const a1: TypeA = { a: "hello" };
 
interface InterfaceB {
	a: string;
}
const b1: InterfaceB = { a: "hi" };

// type 확장
type Base = { x: number };
type Extended = Base & { y: number };
const obj: Extended = { x: 1, y: 2 };
 
// interface 확장
interface IBase {
	x: number;
}
interface IExtended extends IBase {
	y: number;
}
interface IBase {
	z: number;
}
const obj2: IExtended = { x: 3, y: 4, z: 5 };

interface Person {
	name: string;
}
class Human implements Person {
	name = "John";
}

type Box<T> = { value: T };
interface IBox<T> {
	value: T;
}
 
const tBox: Box<string> = { value: "hello" };
const iBox: IBox<number> = { value: 42 };

function add(x: string | number, y: string | number): string | number {
	return x + y;
}
 
const result: string = add(1, 2) as string; // 타입 혼동 가능

type A = { hello: "world" } | { sunbin: "choi" };
 
const u1: A = { hello: "world" };
const u2: A = { sunbin: "choi" };
// const u3: A = { hello: "world", sunbin: "choi" } // ❌ 오류

type A = { hello: "world" } & { sunbin: "choi" };
 
const a: A = {
	hello: "world",
	sunbin: "choi"
};

// type
type T = { a: string } & { b: number };
const t: T = { a: "hi", b: 123 };
 
// interface
interface I1 {
	a: string;
}
interface I2 extends I1 {
	b: number;
}
const i: I2 = { a: "hi", b: 123 };
 
// union
type U = { x: string } | { y: number };
const u: U = { x: "ok" };
 
// intersection
type I = { x: string } & { y: number };
const x: I = { x: "ok", y: 1 };

type Animal = { breath: true };
type Poyouryu = Animal & { breed: true };
type Human = Poyouryu & { think: true };
 
const sunbin: Human = {
	breath: true,
	breed: true,
	think: true
};

interface A {
	breath: true;
}
 
interface B extends A {
	breed: true;
}
 
const b: B = {
	breath: true,
	breed: true
};

type Poyouryu = { breath: true; breed: true };
 
interface C extends Poyouryu {
	think: true;
}
 
const c: C = {
	breath: true,
	breed: true,
	think: true
};

interface A {
	talk: () => void;
}
interface A {
	eat: () => void;
}
interface A {
	shit: () => void;
}
 
const a: A = {
	talk: () => {},
	eat: () => {},
	shit: () => {}
};
 
// 실전 예제 HTMLElement에 커스텀 속성 추가
interface HTMLElement {
	myCustomValue?: number;
}
 
const div = document.createElement("div");
div.myCustomValue = 42; // ✅ 타입 인식됨
 
// 커스터마이징: 인터페이스 병합
// axios에서 config, response 등에 커스텀 필드를 추가하여 실무에서 활용
// 주로 RequestConfig, AxiosResponse 확장에 사용됨
 
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 
declare module "axios" {
	export interface AxiosRequestConfig {
		authToken?: string;
	}
 
	export interface AxiosResponse<T = any> {
		requestId?: string;
	}
}
 
axios
	.get("/api/test", {
		authToken: "abc123" // ✅ 타입 인식됨
	})
	.then((res) => {
		console.log(res.requestId); // ✅ 커스텀 필드 사용 가능
	});