개인공부/typescript

타입스크립트 : 패키지를 타입스크립트에서 사용하는 법

minseokiim 2023. 9. 5. 19:53

* 자바스크립트로 만들어진 패키지를 타입스크립트에서 사용하는 법

1. d.ts 생성하기

1)
import _ from "lodash";  // lodash 패키지를 사용하고 싶은데 npm i 해도 안됨

const str = "hi hi hiiiiii";

console.log(_.camelCase(str));
console.log(_.snakeCase(str));


=> 이유 : lodash는 자바스크립트로 만들어져있음
타입스크립트에서 가져오려면 타입 선언이 필요함


2-1) 해결 : lodash.d.ts 파일 생성하기(패키지 이름으로 d.ts파일 생성)

declare module "lodash" {
  interface Lodash {
    camelCase: (str: String) => string;
    snakeCase: (str: String) => string;
  }
  const _: Lodash;
  export default _;
}


2-2) 해결 : main.d.ts 파일 생성하기(패키지 이름이 아닌 d.ts파일 생성)

declare module "lodash" {
  interface Lodash {
    camelCase: (str: String) => string;
    snakeCase: (str: String) => string;
  }
  const _: Lodash;
  export default _;
}는 똑같고,



/// <reference path="./main.d.ts"/>          //삼중 슬래시 지시자(///)를 통해, 참조태그로 경로 명시

import _ from "lodash";  
const str = "hi hi hiiiiii";
console.log(_.camelCase(str));
console.log(_.snakeCase(str));


+.d.ts파일에서의 d는 ? declare(선언)




2. 실제 존재하는 선언 사용하기

1) Definitely typed 검색 -> github이동
2) npm install --save-dev @types/사용할 패키지의 이름
//타입 선언의 패키지가 존재하다면 해당 내용이 설치 되므로 프로젝트에서 읽어 올 수 있음



- 실제 존재하는 선언 사용하는 방법

1)패키지가 존재하는지 확인
npm info --save-dev @types/lodash

2) 패키지가 있다면 설치(개발 의존성 패키지로 설치)
npm install @types/lodash -D