프론트엔드 공부 블로그 프론트엔드 공부 블로그

TypeScript로 프로젝트를 하다 보면 global.d.ts라는 파일을 마주치게 된다.처음에는 단순히 “글로벌 타입 정의 넣는 곳” 정도로만 이해하고 사용하게 되는데... 실제로 사용하다보면 빌드 과정과 npm 배포 시 주의해야 할 점이 있다. 이번 글에서는 global.d.ts를 사용하면서 마주치는 이슈들에 대해서 정리해보기로 했다.global.d.ts는 어떤 역할을 하는가빌드시 어떻게 처리되는가npm publish 시 포함 전략1. global.d.ts란 무엇인가TypeScript에서 *.d.ts 파일은 타입 선언 파일(Declaration File)이다.그 중 global.d.ts는 이름처럼 전역 타입을 선언하는 곳으로 쓰이는 파일이다. 예를 들어, window 객체에 커스텀 프로퍼티를 추가한다..

TypeScript는 정적 타입 언어로서 컴파일 시점에 타입 검사를 수행한다.그러나 런타임에는 타입이 존재하지 않기 때문에, 외부 입력(JSON 등)으로부터 들어오는 데이터에 대해서는 안전성을 보장하지 않는다이때 유용하게 활용할 수 있는 기능이 바로 Assertion Functions이다타입 시스템의 한계아래 예제를 보자function greet(user: { name: string }) { console.log(`Hello, ${user.name}`);}greet(JSON.parse('{"name": "Irene"}')); // 정상 작동greet(JSON.parse('{}')); // 런타임 에러 발생위 예제는 JSON 파싱 결과를 그대로 넘기기 때문에 컴파일 타임에서는 타입 오류가 발생하지 않지만..

라이브러리를 만드는 과정에서 타입스크립트 빌드를 하게 되었는데, 이상한 상황을 겪었다.src 폴더 안에 .d.ts 타입 선언 파일을 직접 만들어뒀는데, 빌드 후 dist 폴더에는 이 파일이 나타나지 않았다.분명히 타입 선언 파일인데, 왜 결과물에 안 들어가는 걸까? 해당 문제가 발생하니, 빌드 결과물의 d.ts에서 import한 타입이 없어 깨지는 문제가 발생하여 곤란했다 💧 문제 상황 재현 예제 ⁉️폴더 구조my-lib/├── src/│ ├── index.ts ← .d.ts의 type을 import 하여 사용함│ └── index.d.ts ← 여기에 타입 선언이 있다├── package.json└── tsconfig.jsonsrc/index.d.tsexport type GreetingPro..

TypeScript를 쓰다 보면 아래처럼 리터럴 유니언 타입을 정의하는 경우가 많다.type MyType = 'a' | 'b' | (string & {}); 그런데, 여기서 진짜 원하는 건 'a' | 'b' 만 남기고 string & {}은 제거하는 것일 수 있다. (더 엄격하게 타입을 체크하기 위해서) 더 구체적으로는 다음과 같은 예제를 들 수 있다.type MyType = 'a' | 'b' | (string & {});type NoStringMyTime = 'a' | 'b';const data: MyType = 'a'function dataParse(value: NoStringMyTime) { console.log(value);}// Argument of type '(string & {}) | ..

보통 객체 데이터는 Id 값을 가진다.그리고 때때로 각 데이터는 특정 Id값이나 카테고리에서 좀 다른 데이터 패턴을 보일 때가 있다.또는, 하나의 객체에서 여러 Id값을 지닐때 같은 number 타입의 Id긴 하지만 굳이 따지면 다른 데이터값이기는 하는... 이런 경우도 종종 있다. 이런 경우 타입을 짜는게 참으로 곤란한데, 이때 __brand 라는 걸 사용해서 더 구체적으로 타입을 구별하는 기법을 사용한다고 한다 👻+ 객체가 아닌 타입에도 intersection을 통해서 객체로 __brand 타입을 집어넣어 같은 number지만 같지 않은 그런 타이핑이 가능하다 ! 요약하자면, 좀 더 엄격하게 객체들의 타입을 구분할때 고려할 수 있는 방법이다.(+ 런타임에서는 영향이 없고, 컴파일 타임에서만 타입을 ..

TypeScript는 구조적 타이핑(structural typing) 을 기반으로 동작한다. 즉, 객체의 타입을 비교할 때 객체가 가진 속성들을 기준으로 판단하게 된다 🫰이를 활용하면 extends 키워드를 통해 타입 간의 관계(할당 가능 여부)를 쉽게 판별할 수 있다. 이번에는 타입스크립트에서 객체를 비교하는 다양한 예제를 테스트해보는 글을 남겨보기로 했다.(extends와 함께하는... ⭐)구조적 타이핑과 객체 타입 비교 먼저, 간단한 두 객체 타입을 예제로 들어보자. 아래와 같은 예제, 기본 데이터 구조를 나타내는 BasicRecord와 추가 정보를 담은 DetailedRecord로 구조적 타이핑에 대해서 살펴보자.type BasicRecord = { values: string[] };type D..

객체의 타입을 설정할 때 있었던 일이다. const winner = { "One": false, "Two": false, "Three": true,}; 이런 객체가 있다고 가정해보자. 객체의 Key값은 One, Two, Three만 될 수 있기에, 타입으로 제한해보자 👻 가장 처음 떠올릴 수 있는 방법은 다음과 같다! type KeyExample = "One" | "Two" | "Three";const winnerFail: { [key: KeyExample]: boolean } = { "One": false, "Two": false, "Three": true,} 이렇게 하면 될 것 같지만! 에러가 발생한다. 타입 에러에 따르면, 인덱스 시그니쳐 파라미터 타입은 liter..

타입스크립트를 잘 사용하기 위한 여러 유틸 타입이 있다. 그중에서도 이미 잘 사용중이던 함수를 사용한다면, ReturnType을 통해서 해당 함수의 반환값 타입을 쉽게 얻을 수 있다. ReturnType function getUser() { return { name: "Alice", age: 30, };} 이런 함수가 있을 때, 이 함수의 리턴값 타입을 재사용하고자 하는 경우를 생각해보자.interface getUserReturnValue { name: string; age: number;} 이렇게 타입을 직접 작성할 수도 있지만, 만약 getUser 함수의 리턴값이 바뀌는 작업이 일어나면 타입도 직접 바꿔줘야 한다.그리고 사람이 작성하는 코드이기에, 실수가 일어나기 더 쉬워보인다. 때..