어제 오늘 내일

이 글의 목표: 많은 입문자가 벽을 느끼는 제네릭을, "타입의 매개변수"라는 관점에서 쉽게 이해합니다.문제: any는 타입 정보를 잃는다배열의 첫 원소를 반환하는 함수를 만든다고 합시다.// any를 쓰면 반환 타입도 any가 되어, 이후 타입 검사를 다 잃는다function first(arr: any[]): any { return arr[0];}const n = first([1, 2, 3]); // n의 타입: any 😢n.toUpperCase(); // 컴파일러가 막지 못함 (실행 시 오류 발생)타입마다 함수를 따로 만드는 것도 비효율적입니다.function firstNumber(arr: number[]): number { return arr[0]; }function ..

이 글의 목표: "왜 이 타입이 저 타입에 할당되지?" 같은 혼란을 없앱니다. TypeScript 타입 호환성의 근본 원리를 이해합니다.이름이 아니라 "모양"으로 판단한다Java나 C#은 타입 이름이 같아야 호환됩니다(명목적 타이핑, nominal typing). TypeScript는 다릅니다. 모양(구조)이 같으면 호환됩니다. 이것이 구조적 타이핑(structural typing)입니다.interface Point { x: number; y: number;}// Point라고 선언하지 않았지만, x와 y를 가진 객체const coord = { x: 10, y: 20 };// 모양이 Point와 같으므로 할당된다 — 이름은 상관없다const p: Point = coord; // ✅이걸 "덕 타이핑(d..

이 글의 목표: 함수를 타입 관점에서 완전히 다룹니다. 매개변수 옵션, 기본값, 나머지 매개변수, 함수 타입, 오버로드까지.매개변수와 반환 타입// (매개변수: 타입) => 반환타입function add(a: number, b: number): number { return a + b;}// 화살표 함수도 동일const multiply = (a: number, b: number): number => a * b;반환값이 없으면 void입니다.function log(message: string): void { console.log(message); // return 문이 없음}선택적 매개변수(?)// greeting은 없어도 된다function greet(name: string, greeting?: st..

이 글의 목표: 유니온 타입을 안전하게 다루는 모든 기법을 정리합니다. typeof, in, instanceof, 사용자 정의 타입 가드까지.좁히기란?넓은 타입(예: string | number)을, 코드의 특정 지점에서 더 구체적인 타입으로 "좁히는" 것입니다. TypeScript는 여러분이 작성한 조건문을 읽고, 각 분기 안에서 타입을 자동으로 좁혀줍니다.1) typeof 가드원시 타입을 구분할 때 씁니다.function format(value: string | number) { if (typeof value === "string") { // 이 블록에서 value는 string return value.trim().toUpperCase(); } else { // 이 블록에서 val..

이 글의 목표: TypeScript 타입 시스템의 뼈대인 "합집합(union)"과 "교집합(intersection)"을 이해하고, 실전 패턴을 익힙니다.유니온(|): "이것 또는 저것"여러 타입 중 하나일 수 있음을 나타냅니다.// id는 문자열이거나 숫자일 수 있다type ID = string | number;let userId: ID = 100;userId = "abc-123"; // 둘 다 허용유니온의 값을 쓸 때는, 모든 타입에 공통으로 존재하는 것만 바로 접근할 수 있습니다.function printId(id: string | number) { // id.toUpperCase(); // ❌ number에는 toUpperCase가 없다 console.log(id.toString()); // ✅..