개발새발

flat은 배열의 중첩된 구조를 평평하게 만들어주는 유용한 메서드다. JavaScript에서는 단순하게 동작하지만, TypeScript에서는 그 동작을 타입 수준에서 표현하기 위해 복잡한 타입 시스템을 활용한다. 이 글에서는 flat 메서드가 어떻게 타입 추론을 수행하는지를 하나씩 분석해본다. 기본 사용법 const A = [[1, 2, 3], [4, [5]], 6];const R = A.flat(); // [1, 2, 3, 4, [5], 6]const RR = R.flat(); // [1, 2, 3, 4, 5, 6]const R2 = A.flat(2); // [1, 2, 3, 4, 5, 6] 배열 A는 3차원 구조를 갖고 있다. flat()을 호출할 때마다 한 차원씩 감소한..

배열의 reduce 메서드는 요소를 누적하여 하나의 값으로 축약할 수 있는 강력한 도구이다. TypeScript에서도 이 메서드의 타입을 정확히 정의하는 것은 꽤 흥미로운 연습이 된다. 이번 글에서는 reduce 메서드를 직접 타이핑하며 초깃값 유무에 따라 타입이 어떻게 달라지는지를 살펴본다. 기본 사용 예시const r1 = [1, 2, 3].myReduce((a, c) => a + c); // 6const r2 = [1, 2, 3].myReduce((a, c, i, arr) => a + c, 10); // 16 reduce의 콜백 함수는 총 네 개의 인자를 받는다:누적값 (a)현재값 (c)인덱스 (i)원본 배열 (arr)초깃값을 제공하지 않으면 첫 번째 요소가 초깃값..

이전 글에서는 forEach, map 메서드를 직접 타이핑해보았다. 이번에는 배열의 filter 메서드를 직접 타이핑해보며, TypeScript에서 타입 서술 함수(type predicate)를 어떻게 다루는지도 함께 살펴본다. filter의 기본 개념JavaScript에서 filter 메서드는 배열을 순회하며, 콜백 함수가 true를 반환한 요소만 모아서 새로운 배열을 반환한다. 기본 구조는 다음과 같다.[1, 2, 3].filter((v) => v 여기서는 이름 충돌을 피하기 위해 myFilter라는 이름으로 정의한다.초기 타입 선언처음에는 다음과 같이 단순한 형태로 선언할 수 있다.interface Array { myFilter(callback: (v: T, i: number, a: T[]) =..

TypeScript를 사용하다 보면, 익숙한 내장 메서드의 타입을 직접 선언해보는 연습이 큰 도움이 된다. 이번 글에서는 배열의 map 메서드를 직접 타이핑해보며 타입 추론이 어떻게 이루어지는지를 살펴본다. myMap 메서드 만들기기존 map 메서드는 Array.prototype에 이미 정의되어 있기 때문에, 이름 충돌을 피하기 위해 myMap이라는 이름으로 새롭게 정의해본다.const r1 = [1, 2, 3].myMap(() => {});const r2 = [1, 2, 3].myMap((v, i, a) => v);const r3 = ['1', '2', '3'].myMap((v) => parseInt(v));const r4 = [{ num: 1 }, { num: 2 }, { num: 3 }].myMap..

배열에는 잘 알려진 메서드인 forEach가 존재한다. 평소에는 아무렇지 않게 사용하던 이 메서드도, 막상 타입을 직접 선언해보라고 하면 당황하기 쉽다. 평소에 직접 메서드를 타이핑하는 연습을 하지 않았기 때문이다.이번 글에서는 TypeScript의 배열 메서드 forEach와 동일한 기능을 하는 myForEach라는 메서드를 직접 타이핑하고 구현하며, 타입 선언의 원리와 과정을 배워보자. 먼저 아래와 같이 myForEach를 호출해보자.[1, 2, 3].myForEach(() => {}); 위 코드를 작성하면 다음과 같은 에러가 발생한다.Property 'myForEach' does not exist on type 'number[]'. 이는 당연한 결과이다. myForEach는 존재하지 않기 때문이다...

타입스크립트를 사용할 때, 객체 리터럴 내 메서드에서 this의 타입을 자동으로 추론하고 싶을 때가 있다. 하지만 기본적으로 타입스크립트는 객체 리터럴에서 this의 타입을 추론하지 못하기 때문에 this.money, this.name 등의 코드에서 타입 오류가 발생할 수 있다. 이 문제를 해결하기 위한 강력한 유틸리티 타입이 바로 ThisType 이다.const obj = { data: { money: 0, }, methods: { addMoney(amount: number) { this.money += amount; // ❌ 에러: Property 'money' does not exist on type ... }, },}; 위 코드는 실행 상 문제는 없지만 타입스크립트..

타입스크립트의 고급 타입 기능 중에서도 infer는 조건부 타입과 결합되어 타입 추론을 할 수 있게 해준다. infer는 특히 함수나 생성자 타입에서 내부 타입(인자, 반환값 등)을 꺼내올 때 사용되며, 타입스크립트에서 기본 제공하는 유틸리티 타입들 중 다음 네 가지에 사용된다:ParametersConstructorParametersReturnTypeInstanceType 1. Parameters: 함수 매개변수 타입 추출type MyParameters any> = T extends (...args: infer P) => any ? P : never;type Fn = (a: number, b: string) => boolean;type Params = MyParameters; // 결과: [number..

타입스크립트에는 실무에서 자주 사용하는 유틸리티 타입이 여러 가지 존재한다. 그중에서도 Exclude, Extract, Omit, NonNullable은 모두 조건부 타입 + 분배법칙을 이용해 동작하는 대표적인 타입들이다. 1. Exclude: 제거하기T에서 U에 해당하는 타입을 제거하는 타입이다.type MyExclude = T extends U ? never : T;type Result = MyExclude;// 결과: 1 | 3  1 | '2' | 3 은 유니언 타입이므로 분배법칙이 작동한다.'2' extends string은 true이므로 never 처리되고,나머지는 그대로 유지되어 1 | 3이 남는다. 2. Extract: 추출하기 T에서 U에 해당하는 타입만 추출한다.type MyExtract..