프론트엔드 첫걸음

프로젝트를 진행하다가 빌드 중 아래와 같은 에러를 만났습니다.Failed to compileCannot find type definition file for 'minimatch'.The file is in the program because:Entry point for implicit type library 'minimatch' TS2688같은 프로젝트를 쓰는 다른 개발자에게서는 문제가 없었기 때문에, 제 로컬 환경이나 IDE 설정 문제라는 생각이 들었습니다.원인 분석이 에러는 TypeScript가 minimatch의 타입 정의(.d.ts)를 찾지 못할 때 발생합니다.대표적인 원인은 다음과 같습니다:로컬/글로벌 TypeScript 버전 불일치IDE가 node_modules/typescript 대신 전역 ..

타입스크립트의 분배 규칙(distributive conditional types)은 조건부 타입(T extends U ? X : Y)을 정의할 때 제네릭 매개변수에 유니언 타입이 들어오면, 그 유니언 타입의 각 멤버에 대해 개별적으로 조건이 적용되는 동작을 말함. 1. 기본 개념type Example = T extends number ? 'num' : 'other';T가 제네릭이 아닌 고정된 타입이면 그대로 조건 판별:type A = Example; // 'num'type B = Example; // 'other'T가 유니언 타입이면, 각 멤버별로 조건을 적용한 후 결과를 다시 유니언으로 합침:type C = Example; // 처리 과정:// 1. number → 'num'// 2. string → ..

Partial Partial: T의 모든 속성을 옵셔널로 변경.type Partial = { [P in keyof T]?: T[P] };interface User { id: number; name: string }const u: Partial = { name: "Kim" }; // id 없어도 OK Pick Pick: T에서 K 속성만 추출.type Pick = { [P in K]: T[P] };type UserName = Pick; // { name: string } Omit, Exclude, Extract 타입 분석Omit: T에서 K 속성을 제거Exclude: T에서 U에 해당하는 타입 제거Extract: T에서 U에 해당하는 타입만 남김type UserWithoutId = Omit; // { na..

forEach, map 제네릭 분석TypeScript의 Array는 제네릭을 활용해 각 메서드의 매개변수 타입을 배열 요소 타입과 연결합니다.interface Array { forEach(callbackfn: (value: T, index: number, array: T[]) => void): void; map(callbackfn: (value: T, index: number, array: T[]) => U): U[];}T : 배열 요소 타입U : map 실행 결과 요소 타입 (콜백 반환값 타입)예시:[1, 2, 3].forEach((v) => console.log(v)); // v: numberconst lengths = ["a", "bb"].map(s => s.length); // lengths:..

1) 기본: 호출 시점에서 타입이 정해진다function first(arr: T[]): T { return arr[0];}const n = first([1, 2, 3]); // T = numberconst s = first(["a", "b"]); // T = stringconst x = first([10, 20]); // 명시적 지정 가능호출할 때 인자에 맞춰 T가 자동 추론되거나, 직접 지정할 수도 있음.2) T extends { ... } (객체 형태 제약)function getId(value: T): number { return value.id;}getId({ id: 1, name: "Kim" }); // OK// getId(123); // Error최소한 { id: number }..

1. class는 실제 JavaScript에서도 남아있음TypeScript의 class 문법은 단순히 타입 검사 전용이 아니라 실제 JavaScript 코드로 변환된 후에도 존재한다.class Person { name: string; constructor(name: string) { this.name = name; }}위 코드는 JavaScript로 컴파일되어도 여전히 class로 남는다.즉, 런타임에서도 Person은 실제 생성자 함수처럼 동작한다.반면 interface는 타입 검사 전용이므로 JS로 변환되면 사라진다. 2. 추상 클래스 (abstract class)abstract 키워드로 선언하는 클래스는 직접 인스턴스를 만들 수 없고 반드시 상속을 통해서만 사용할 수 있다.또한 추상 메서..

1. 클래스는 "값" + "타입" 두 가지 역할을 한다타입스크립트에서 class는 런타임에는 값(value)으로 존재하면서,동시에 타입 공간(type space)에서도 이름을 가진다.class A { a: string; b: number; constructor(a: string, b: number = 123) { this.a = a; this.b = b; } method() {}} 2. type AA = A여기서 A는 **클래스 A의 인스턴스 타입(instance type)**을 의미한다.type AA = A;즉, AA는 new A(...) 해서 만들어지는 객체가 어떤 모양을 가지는지 나타내는 타입이다. 3. const a: A = new A('123')여기서도 A는 인스턴스 타입이다..

1. readonlyReadonly는 타입의 모든 프로퍼티를 읽기 전용으로 만든다.즉, 값을 수정할 수 없게 한다.interface User { id: number; name: string;}const u: Readonly = { id: 1, name: "Kim"};u.id = 2; // ❌ 오류 발생 (읽기 전용)u.name = "Lee"; // ❌ 오류 발생Readonly는 타입 레벨에서만 적용된다.실제 JS 런타임에서는 값이 변하는 것을 막지 못한다. (Object.freeze 같은 것은 따로 사용해야 한다)2. 인덱스드 시그니처 (Indexed Signatures)인덱스드 시그니처는 **동적 키(key)**를 가지는 객체 타입을 정의할 때 사용한다.interface StringMap {..

이전에는 object와 Object가 혼용되어 혼란이 있었다.4.8 이후 object는 보다 좁은 타입으로, "객체만" 을 표현한다.반면 Object는 훨씬 넓은 타입으로, 원시값까지 포함하여 null과 undefined만 제외한다. TypeScript 4.8에서의 object 타입1. object 타입의 의미object 타입은 원시 타입(primitive) 을 제외한 모든 값을 의미한다.원시 타입에는 string, number, boolean, symbol, bigint, null, undefined 가 포함된다.따라서 object 타입에는 {}, 배열, 함수, new Date() 같은 값이 할당될 수 있다.let a: object;a = { x: 1 }; // 가능하다.a = [1, 2, 3]; ..

자바스크립트는 인자의 개수나 타입이 자유롭기 때문에, 하나의 함수에서 다양한 입력을 처리하는 경우가 많다.타입스크립트에서는 이러한 유연한 호출 형태를 타입으로 명시하기 위해 함수 오버로드를 사용한다. 1. 함수 오버로드란?함수 오버로드는 하나의 함수가 여러 개의 타입 시그니처를 가질 수 있도록 하는 문법이다.function 함수이름(파라미터1): 리턴타입;function 함수이름(파라미터2): 리턴타입;function 함수이름(구현부) { ... }이렇게 여러 개의 선언부가 있고, 마지막에 하나의 구현부가 따라오는 형태다. 2. 예시로 이해하기function func(x: number): void;function func(x: string): void;function func(x: number | str..