반응형
이 게시물에서는 TypeScript의 앰비언트 모듈을 살펴보겠습니다.
앰비언트 모듈이 무엇인지, 어떻게 사용하는지, 사용 시 몇 가지 주의 사항과 팁을 다룰 것입니다.
앰비언트 모듈이란 무엇입니까?
Ambient 모듈은 JavaScript로 작성된 라이브러리를 가져와서 마치 TypeScript로 작성된 것처럼 원활하고 안전하게 사용할 수 있는 TypeScript 기능입니다.
앰비언트 선언 파일은 모듈의 타입을 설명하지만 구현은 포함하지 않는 파일입니다.
앰비언트 선언 파일은 JavaScript로 변환되지 않습니다.
순전히 타입 안전 및 IntelliSense를 위해 사용됩니다.
d.ts 파일 포맷을 따릅니다.
TypeScript 에코시스템에는 DefinitelyTyped를 통해 사용할 수 있는 수천 개의 앰비언트 선언 파일이 존재합니다.
DefinitelyTyped는 TypeScript 커뮤니티에서 제공하고 유지 관리하는 선언 파일을 포함하는 리포지토리입니다.
다음과 같은 명령을 사용하여 프로젝트에 타입을 설치한 적이 있다면, 해당 리포지토리를 사용한 것입니다.
npm install --save-dev @types/node
많이 사용되는 JavaScript 라이브러리의 타입은 대부분 DefinitelyTyped에 있습니다.
그러나 DefinitelyTyped에서 타입이 누락된 JavaScript 라이브러리가 있는 경우
항상 이에 대한 자체 앰비언트 모듈을 작성할 수 있습니다.
타입 정의는 외부 라이브러리의 모든 코드 라인에 대해 반드시 수행할 필요는 없으며 사용 중인 부분에 대해서만 수행해야 합니다.
앰비언트 모듈의 사용 방법
TypeScript에서 선언 모듈을 사용하는 세 가지 주요 방법이 있습니다.
- 구현 파일 상단에서 삼중 슬래시 지시문을 사용하여 선언을 가져옵니다.
- tsconfig 파일에서 typeRoots 필드를 설정합니다.
- tsconfig 파일의 paths 필드를 설정합니다.
삼중 슬래시 지시문은 컴파일 프로세스에 추가 파일을 포함하도록 컴파일러에 지시하는 XML 태그가 있는 한 줄 주석입니다.
일반적으로 다음과 같습니다.
/// <reference path="../types/sample-module/index.d.ts" />참고: 단일 슬래시 지시문은 파일의 맨 위에 있어야 합니다. import 문 아래에 넣으면 대신 일반 주석으로 처리됩니다.
tsconfig 파일의 typeRoots 필드는 선언 파일이 포함된 디렉토리를 지정하는 데 사용됩니다.
컴파일러는 이러한 디렉터리에서 컴파일 프로세스에 포함할 TypeScript 선언 파일을 검색합니다.
tsconfig 파일의 paths 필드는 TypeScript가 제공하는 정규식 패턴을 기반으로 TypeScript 파일을 찾아야 하는 특정 경로를 지정합니다.
앰비언트 모듈 활용 팁
paths를 사용하여 프로젝트에 사용자 정의 타입 정의를 추가하십시오.
고유한 타입 정의가 있는 모듈에 대해 사용자 정의된 타입 정의를 사용하려는 경우 paths를 이용해 컴파일러 옵션을 재정의할 수 있습니다.
결과적으로 TypeScript는 외부 라이브러리에서 제공하는 타입이 아닌 사용자 정의 모듈에서 가져온 타입을 사용합니다.
How you declare your imports makes a difference
타사 라이브러리에 대한 TypeScript 정의를 생성할 때 모듈 선언 내에 모든 import 선언을 배치하는 것이 중요합니다.
그렇지 않으면 선언 모듈이 대신 기능 보강(argumentation)으로 처리되고 사용자 정의 타입이 등록되지 않습니다.
위는 정상적으로 동작하지 않습니다. 대신 모듈 내부에서 import를 선언해야 합니다.
단축 앰비언트 선언을 사용하여 유형을 빠르게 수정
타사 라이브러리 코드를 사용할 수 있도록 선언을 만드는 데 시간을 소비하고 싶지 않다면 대신 shorthand module declaration을 사용할 수 있습니다.
declare module "sample-module";
단축 앰비언트 선언을 사용할 때 해당 모듈의 모든 가져오기 유형은 any입니다.
마무리
declare를 가끔 본 적이 있는데 뭐에 쓰는지 몰랐을 수 있습니다.
서드파티 자바스크립트 라이브러리를 타이핑 하는데 사용합니다.
반응형
'FrontEnd' 카테고리의 다른 글
| React와 Typescript를 함께 사용하기 : 간단한 6개의 팁 (0) | 2022.04.28 |
|---|---|
| 타입스크립트 : 모듈 확장(module augmentation)으로 서드파티 관련 타입 문제 해결하기 (0) | 2022.04.28 |
| 리액트 패턴 : Derived State - 파생(계산된) 상태 활용하기 (0) | 2022.04.28 |
| 리액트 패턴 : 타입스크립트를 활용해 as Props 사용하기 (0) | 2022.04.28 |
| 리액트로 XState 시작하기 (0) | 2022.04.28 |
