타입 스크립트 - 모듈의 타입 선언

타입 스크립트에서 외부 모듈을 설치하고 사용할 때 그대로 사용하면 에러가 발생한다.

현재 lodash라는 패키지를 설치하고 사용하려고 한다.

하지만 locash라는 모듈을 찾을 수 없다는 에러가 발생한다.

이 에러를 해결 할 방법은 두 가지가 있다.

1. 직접 타입 선언을 한다.

d.ts 확장자로 사용하려는 함수에 대한 타입을 선언해주면 된다.

주의 할 점은 프로젝트에서 타입 스트립트 파일을 읽을 수 있는 범위에 작성해야 한다는 것이다. 이 범위는 tsconfig.json의 include 속성을 통해 정의할 수 있다.
만약 types 안에 d.ts 파일을 정의하려면 "types/**/*.ts"를 추가하면 된다.

2. 외부에서 누군가가 타입 선언 한 파일을 npm으로 받아온다.

위에 방법처럼 함수들을 사용할 때 일일이 선언해야 하는 일은 매우 귀찮을 것이다.
이 때 npm을 통해서 외부에서 이미 누군가가 타입 정의를 해 놓은 모듈을 받아올 수 있다.

이미 누군가가 만들어놓은 타입 선언이 존재하는지 확인하려면 터미널에
npm info @types/lodash를 입력해보면 해당 버전들이 나온다.
그 후 @types/ 뒤에 모듈명을 붙여서 설치하면 된다.
npm i @tyeps/lodash -D

설치가 완료되면 nodemodules에 @types 폴더에 타입 정의 된 파일을 볼 수 있다.
하지만 import 구문의 에 에러가 발생하는 것을 알 수 있다.

이유는 간단하다. @types/lodash index.d.ts 파일을 보면 기본 내보내기 구조로 타입이 선언 되어있지 않기 때문이다.

해결 방법

1. import 구문에서 * as 를 사용해서 가져오는 것

import * as _ from "lodash"; // 해당 패키지에서 나오는 모든 데이터를 _ 기호를 통해서 사용하겠다

2. tsconfig.json에서 esModuleInterop 옵션을 true로 설정하면 된다.
   

추가로 특정한 패키지가 자바 스크립트로만 만들어져 있는지, 타입 선언이 존재하는지 처음부터 타입 스크립트로 만들어져 있는지 쉽게 확인하는 방법은 구글에 패키지를 검색 해보면 된다.

구글에 npm lodash를 검색하고 npm 홈페이지에 들어가면 패키지의 이름 옆에 DT를 볼 수 있다. DT가 있다면 이 패키지는 자바 스크립트로 만들어져 있지만 이미 만들어져있는 타입 선언이 존재한다는 것이다.

우리가 흔히 사용하는 axios의 패키지를 살펴보면 처음부터 TS가 붙어있는 것을 알 수 있다. 이는 타입 스크립트로 만들어저있는 것을 나타내고 따로 @types로 타입 선언 모듈을 불러올 필요가 없다.

타입 스크립트 파일에서 자바 스크립트 파일 가져오기

타입 스크립트 파일에서 자바 스크립트 파일을 가져오려면 tsconfig에 allowJs 옵션의 값으로 true를 주어야 한다.

하지만 자바 스크립트에서 가져온 함수들은 기본적으로 any 타입으로 동작하기 때문에 타입 스크립트에서 추구하는 엄격한 모드를 사용하는 것과는 거리가 멀다.

null을 전달해도 에러가 발생하지 않는 것을 볼 수 있다.

자바 스크립트 파일에 대한 타입을 제공하려면 동일한 이름의 d.ts 확장자를 가진 파일을 만들고 내부에 타입 선언을 해주면 된다.

이 때 주의할 점은 myUtils.js에서 add라는 이름으로 export 하고 있기 때문에 d.ts 파일에서도 add라는 이름으로 내보내야 한다.

export default로 내보내는 방법

add와 subtract가 이미 타입 선언이 되어있기 때문에 타입 추론을 통해서 utils의 add와 subtract의 타입도 선언이 된다.

만약 타입을 명시적으로 작성하려면 declare 키워드로 변수를 생성하고 해당 객체의 인터페이스를 지정한 후 export default로 내보내면 된다.

만약 별도의 이름이나 별도의 경로에 d.ts 파일을 작성해야 한다면 추가적인 작업이 필요하다.

1. tsconfig에서 paths 속성 작성하기
   

2. 지정한 path 이름으로 불러오기
   

3. d.ts 파일에서 해당 모듈을 선언해준다.