개발새발

Query는 점차 사용이 줄어들고 있지만 여전히 레거시 코드나 간단한 DOM 조작 등에서 자주 볼 수 있는 라이브러리다. 이번 글에서는 jQuery 라이브러리의 타입 선언 파일을 직접 분석하면서, 타입스크립트의 강력한 타입 시스템이 어떻게 외부 라이브러리를 설명하고 지원하는지를 배워보자. jQuery와 타입 선언 설치$ npm i jquery@3.6.3 @types/jquery@3.5.16 jquery: 실제 구현 코드@types/jquery: 타입 선언 파일 (.d.ts)jQuery는 자체적으로 타입스크립트를 지원하지 않기 때문에 @types/jquery 패키지를 추가로 설치해야 한다.타입 선언 파일 진입점 확인node_modules/@types/jquery/package.json에 다음이 명시되어 ..

앞으로 jQuery 타입 선언 분석에 들어가기 전에, 타입스크립트 프로젝트의 기본 설정인 tsconfig.json과 tsc 명령어의 역할을 먼저 짚고 넘어가자. 이 글은 실무에서 자주 사용하는 설정들을 중심으로, 그 의미와 활용법을 정리한다. 프로젝트 초기화먼저 프로젝트 폴더를 만들고 tsconfig.json 파일을 생성한다.$ mkdir jquery$ cd jquery$ npx tsc --init 이 명령어는 tsconfig.json 파일을 생성하면서 기본적인 컴파일 옵션을 함께 설정해준다.tsconfig.json 기본 옵션 설명생성된 tsconfig.json 파일은 기본적으로 다음과 같은 옵션을 포함한다:{ "compilerOptions": { "target": "es2016", "mod..

JavaScript의 bind 메서드는 함수의 this 컨텍스트를 명시적으로 고정하고, 일부 인수를 미리 채워넣는 역할을 한다. 그런데 TypeScript에서는 이 동작을 타입 수준에서도 정확히 표현하기 위해 매우 다양한 오버로딩을 제공한다.이번 글에서는 TypeScript 5.0.4 기준으로 bind 메서드가 어떻게 정의되어 있는지, 왜 그렇게 복잡한 오버로딩이 필요한지를 하나씩 분석해본다. 간단한 예제function a(this: Window | Document) { return this;}const b = a.bind(document);const c = b(); // c: Document TypeScript는 bind를 통해 this를 바인딩하면, 이후 호출에서 해당 this가 고정되었다고 판단..

JavaScript에서 Promise는 비동기 처리를 위한 기본 객체다. TypeScript는 이 Promise가 반환하거나 체이닝하는 값을 정적으로 추론할 수 있도록 복잡하고 정교한 타입 시스템을 갖추고 있다. 이번 글에서는 Promise, Awaited, 그리고 Promise.all, .then(), .catch()가 어떻게 타입 추론을 수행하는지를 분석해본다. Promise.resolve vs awaitconst str1 = Promise.resolve('promise'); // Promiseconst str2 = await Promise.resolve('promise'); // string Promise.resolve는 Promise를 반환한다.await는 Awaited로 타입이 바뀐다.이때 A..

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..