어제 오늘 내일

이 글의 목표: 많은 입문자가 벽을 느끼는 제네릭을, "타입의 매개변수"라는 관점에서 쉽게 이해합니다.문제: 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()); // ✅..

이 글의 목표: TypeScript 입문자가 가장 자주 묻는 질문에 실용적인 답을 줍니다. 둘의 공통점, 차이점, 그리고 선택 기준. 둘 다 "이름 붙은 타입"을 만든다객체 구조에 이름을 붙이는 두 가지 방법입니다. 대부분의 경우 서로 바꿔 써도 됩니다.// interface 방식interface User { id: number; name: string;}// type 방식type UserT = { id: number; name: string;};// 사용법은 완전히 동일하다const a: User = { id: 1, name: "철수" };const b: UserT = { id: 2, name: "영희" };확장(상속) 방법이 다르다interface: extendsinterface Animal ..

이 글의 목표: 모든 곳에 타입을 다는 건 초보의 실수입니다. TypeScript가 알아서 추론하는 곳과, 직접 명시해야 하는 곳을 구분합니다. TypeScript는 대부분 스스로 안다타입을 명시하지 않아도, 값을 보고 타입을 추론합니다.let count = 10; // TypeScript는 count를 number로 추론let title = "안녕"; // string으로 추론let flag = true; // boolean으로 추론// count = "열"; // ❌ 이미 number로 추론됐으므로 에러: number 같은 표기를 굳이 붙이지 않아도 됩니다. 오히려 붙이면 코드만 장황해집니다.// 👎 불필요한 타입 표기let count: number = 1..

이 글의 목표: TypeScript의 기본 타입을 예제로 익히고, 특히 헷갈리는 any / unknown / never의 차이를 명확히 합니다. 원시 타입: string, number, boolean가장 기본이 되는 세 가지입니다.const name: string = "김철수";const age: number = 30; // 정수, 실수 구분 없이 모두 numberconst isAdmin: boolean = true;// 타입에 맞지 않는 값은 즉시 에러// const wrong: number = "열살"; // ❌ 'string'을 'number'에 할당할 수 없음참고로 number는 정수/실수를 구분하지 않고, 큰 정수를 위한 bigint, 심볼을 위한 symbol도 원시 타입에 포함됩..

이 글의 목표: 내 컴퓨터에서 .ts 파일을 직접 실행해보기. 컴파일러의 동작 원리도 함께 이해합니다. 준비물: Node.jsTypeScript 도구들은 Node.js 위에서 돌아갑니다. nodejs.org에서 LTS 버전을 설치하고 확인합니다.node -v # v20.x 이상이면 충분npm -v프로젝트 초기화mkdir ts-study && cd ts-studynpm init -y # package.json 생성npm install -D typescript # 컴파일러를 프로젝트 로컬에 설치 (-D = 개발 의존성)전역(-g) 설치보다 프로젝트 로컬 설치를 권장합니다. 프로젝트마다 TypeScript 버전이 다를 수 있기 때문입니다.tsc: Type..

이 글의 목표: TypeScript를 "왜" 쓰는지 체감하기. 문법을 배우기 전에, 타입이 없어서 겪는 고통부터 살펴봅니다. JavaScript는 관대하다. 너무 관대하다.JavaScript는 실행하기 전까지 아무것도 검사하지 않습니다. 아래 코드를 봅시다.// 사용자 객체에서 할인가를 계산하는 함수function getDiscountedPrice(product, rate) { return product.price - product.price * rate;}// 어딘가에서 이렇게 호출했다고 하자getDiscountedPrice({ price: 10000 }, 0.1); // 9000 ✅ 정상// 하지만 실수로 이렇게 부르면?getDiscountedPrice({ prise: 10000 }, 0.1);..