패키지의 타입선언

@2023/09/21

안녕하세요 lika-7입니다

이번 시간에는 TypeScript에서 자바스크립트 패키지를 이용 할 때 타입을 선언하는 방법을 정리하겠습니다

TypeScript에서 JavaScript 패키지를 사용할 때 오류

lodash 패키지를 main.ts 파일에 import 하면

위와 같은 에러가 납니다

이는 자바스크립트 파일이 타입이 지정되어 있지 않기에 생기는 문제 입니다

에러의 내용을 확인해보면

1. lodash 파일에 대한 선언 파일을 찾을수 없다고 합니다.

2. lodash 는 암시적으로 any 타입을 가진다고 합니다

3. npm i —save-dev @types/loadash 를 하거나

4. lodash 모듈이 선언된 .d.ts 선언파일이 존재한다면 추가하세요

lodash 설치 내용 확인

우선 lodash 패키지가 설치된 내용을 확인해 봅시다.

우선 패키지가 잘 설치되었는지 보면 일반 의존성 패키지로 잘 설치가 되어 있는 것을 볼 수 있습니다

그다음 node_modules 내용을 봅니다.

node_modules → lodash → package.json을 확인해보면

main 파일은”lodash.js”인 자바스크립트 파일임을 확인 할 수 있습니다

✅

lodash는 자바스크립트 파일이기에 타입스트립트에서 에러가 나는 것을 확인 할 수 있습니다

그렇기에 main.ts에서 lodash 파일을 import 하면 타입이 지정되어 있지 않기에 에러가 납니다

해결방법

해결 방법은 2가지가 있습니다

1. .d.ts 파일을 이용한 타입 선언

💡

.d.ts 파일을 생성하고 main.ts에서 사용하는 내용을 선언하여 에러가 발생하고 있는 부분의 타입을 명시해 줍니다

✅

.d.ts 파일의 d는 declare의 약어입니다. .d.ts 파일은 기능을 모아논 파일이 아니라 “타입을 선언하기 위해 작성”합니다

main.ts가 위치한 폴더에 lodash.d.ts 파일을 만들어줍니다

//TypeScript
//lodash.d.ts

declare module 'lodash'{ // declare를 통해서 lodash 모듈의 타입을 선언하겠다
    interface Lodash{
        camelCase: (str: string) =>string
        snakeCase: (str: string) =>string
    }
    const _: Lodash //Lodash는 _를 이용해 사용하니까 "_"를 변수 이름으로 선언해 주었다 (_는 변수 이름임)
    export default _ //_변수를 모듈의 기본 내보내기로 선언함.
}

파일의 내용은 위와 같이 선언 합니다

✅

1. declare를 통해서 lodash 모듈의 타입을 선언합니다 2. interface Lodash를 선언하고 3. camelCase와 snakeCase 타입을 선언합니다 4. _ 변수의 인터페이스를 Lodash로 설정합니다 5. _ 변수를 기본 내보내기로 선언 합니다

lodash.d.ts 파일을 생성하면 main.ts 파일은 문제 없이 동작하게 됩니다

.d.ts 파일의 생성과 선언은 삼중 슬래시 지시자를 통한 구현도 가능 합니다.

삼중 슬래시 지시자에 대한 자세한 내용은 아래의 북마크를 확인 하세요

삼중 슬래시 지시자

@2023/09/20 안녕하세요 lika-7입니다이번시간에는 타입스크립트에서 삼중슬래시 지시자의 설명과 참조 태그와 함께 사용하는법에 대해서 설명합니다삼중 슬래시 지시자란💡1. 삼중 슬래시 지시자(/// Triple-slash Directives)는 TypeScript 파일에서 사용되는 특별한 주석 문법입니다. 2. 이 지시자들은 TypeScript 컴파일러에게 다른 파일을 참조하도록 하는 역할을 합니다사용법타입 정의 파일 참조주로 “.d.ts” 확장자를 가진 타입 정의 파일을 참조하기 위해 사용됩니다이러한 파일은 외부 JavaScript 라이브러리의 TypeScript 타입 정보를 제공하거나, 프로젝트 내의 커스텀 타입을 정의하는데 사용됩니다/// 삼중 슬래시 지시자는 위와 같이 정의 합니다타입 정의 ..

https://lika7.tistory.com/32

.d.ts 파일 추가의 문제점

lodash의 기능을 main.ts에 추가할 때 마다

위와 같이 lodash.d.ts 파일에 사용할 기능의 타입을 계속 추가해 주어야 하는 문제가 있습니다.

이런 문제점을 해결하기 위해 DefinitelyTyped 를 이용할 수 있습니다.

DefinitelyTyped 를 이용한 타입선언

DefinitelyTyped 란 JavaScript 라이브러리와 프레임워크를 TypeScript로 사용할 때 타입 정보를 제공하는 역할을 합니다

✅

npm info @types/lodash 를 입력 하여 DefinitelyTyped 의 레포지토리에 lodash 타입 패키지가 있는지 확인 합니다

위와 같이 패키지의 정보가 있는 것을 확인 할 수 있다면

npm i @types/lodash -D

입력 하여 lodash 타입 패키지를 설치합니다

✅

1. -D 옵션은 패키지를 개발 의존성으로 설치하도록 지시합니다 개발 의존성으로 설치하면 프로덕션 빌드에서 해당 패키지가 포함되지 않습니다 개발 및 빌드 도구에서만 사용됩니다 2. 타입스크립트 내용은 자바스크립트로 컴파일 되기 때문에 프로덕션 빌드에서는 빠져야 하는 내용입니다. 그렇기에 -D 옵션을 통해 타입스크립트 관련 패키지는 개발 의존성에 포함시킵니다

설치가 되었다면 lodash.d.ts 파일이 없어도 lodash 기능을 사용 할 수 있음을 확인 할 수 있습니다