[TypeScript] d.ts에 대해

💻 d.ts

d.ts파일은 type을 정의(declare)하기위해 존재하는 파일이다. 즉, 기존 JavaScript로 만들어진 서브파티 모듈들을 TypeScript환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일이다.

🖤 어디서 쓸까?

• 타입정의만 따로 저장해놓고 import해서 쓸때
• 프로젝트에서 사용하는 타입을 쭉 정리해놓을 래퍼런스용으로 사용하고싶을 때

🖤 구성

• 타입만 따로 모아둘때
  • 파일명.d.ts라고 작성한 파일은 타입 정의만 넣을 수 있다.
  • 함수의 경우 함수에 {}중괄호 붙이기 불가능하다. 피라미터와 return타입만 지정가능
  • d.ts는 ts파일이 아니기 때문에 ambient module이 되지않아 정의해둔 타입은 export해서 써야한다.
    예시

  export type Age = number;
  export interface Person {
      name: string;
  }

• d.ts파일을 레퍼런스 용으로 쓸때
  • ts파일마다 d.ts파일을 자동생성하면 된다.

    // tsconfig.json
     {
        "compilerOptions": {
            "target": "es5",
            "module": "commonjs",
            "strictNullChecks": true,
            // d.ts자동생성옵션 true로바꿔줌
              // 저장시 자동으로 ts파일마다 d.ts파일이 옆에생성됨
            "declaration": true
        }
    }

  • index.ts

    let 이름: string = "규";
    let 나이 = 20;

    이렇게 작성된것을
  • index.d.ts

    declare let 이름: string;
    declare let 나이: number;

    이렇게 생성된다.
  • 자동생성의 경우 따로 수정할 수 없다.
  • 다른 ts파일에서 import가능

• export없이 d.ts파일을 글로벌 모듈로 만들때
  • 프로젝트내에 types/common폴더두개만든다.
  • tsconfig.json파일에 "typeRoots": ["./types"]옵션추가
  • 옵션 추가시 ts파일에 작성할 때 타입이 없으면 자동으로 타입을 찾아서 적용해준다.
    ❗ 이걸 쓸 경우 파일명.d.ts자동생성기능은 끄는게좋음
    ❗ 보통은 d.ts파일을 만들어서 글로벌 타입보관함으로쓰는 경우는 별로 없다.
• JS라이브러리에 타입지정

• 유명한 라이브러리들은 전부 d.ts파일을 누군가 만들어 놓아서 그것을 다운받아 사용하면 된다.
• 라이브러리 모아놓은 깃 레파짓에 대부분 라이브러리 타입정의 파일을 찾을 수 있다.
• but npm으로 라이브러리 설치 시 타입스크립트 타입정의된 버전을 따로 찾아서 설치할 수 있다. 주소
• node_modules/@types경로로 타입이 설치되고 ts컴파일러는 자동으로 여기서 타입을 가져오게 된다.
  ❗ "typeRoots"옵션이 있을 경우 node_modules/@types 폴더를 추가해야한다.

• 타입부분만 따로 설치할 수도있다. 예를 들어 타입이제공되지 않는 jQuery의 경우
  npm install --save @types/jquery 이렇게 강제로 설치하면 jQuery문법 사용시 타입정의 안해도 된다.