개발새발

타입스크립트에서 타입을 정의하는 일은 종종 단순히 타입 패키지를 사용하는 것으로 충분하지만, 직접 타입을 정의해야 할 상황도 있다. 특히 이미 존재하는 패키지의 타입 정의 파일(.d.ts)을 분석하는 것보다, 타입을 처음부터 직접 만드는 작업은 훨씬 더 어렵다. 이번 글에서는 대표적인 자바스크립트 라이브러리인 jQuery의 타입을 직접 만들어보는 실습을 진행한다.목표jQuery 전체를 정밀하게 타이핑하는 것이 아니라, 특정 코드 조각에서 발생하는 에러를 없애는 최소한의 타입 정의를 직접 작성해보는 것이 목표이다. 복잡한 타입 설계보다는, 주어진 코드가 동작하도록 필요한 타입만 작성하는 것이 핵심이다.준비jquery라는 폴더 안에 zquery.ts 파일을 생성하고, 아래의 예제 코드를 작성한다.interf..

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()을 호출할 때마다 한 차원씩 감소한..