typescript .d.ts 파일

일단 타입스크립트 환경에서는 기본 자바스크립트와는 다른 별도의 문법이 사용된다. 변수나 함수를 정의할 때 타입을 선언하는 것인데 일반 브라우저에서는 이 코드가 당연히 동작하지 않는다. 실제로 동작이 가능하도록 코드를 변환해주는 컴파일 과정이 필요한데 이를 타입스크립트 컴파일러가 담당한다.

 

이런 컴파일 과정에서 타입을 체크해서 지정되지 않는 타입이 대입되었거나 할 경우 컴파일 에러를 발생시킨다. 이를 위해 타입스크립트는 기본적으로 string, number 같은 자바스크립트의 기본타입에 대한 정보가 있어야 하는데 이를 정의해놓은 파일이 lib.d.ts 파일이다.

 

해당파일은 프로젝트에서 node_modules/typescript/lib/lib.d.ts 로 확인할 수 있고 타입스크립트 컴파일러는 컴파일시 해당 파일을 참조하게 된다.

 

그렇다면 추가로 사용하는 모듈들의 타입은 어떨까? 예를 들어 react 모듈을 사용할 경우 기본타입 외에 react 에서 필요한 타입도 있을 것이다. 이러한 모듈에서 타입스크립트를 지원한다면 기본적으로 타입도 함께 제공된다. 모듈 자체에 타입이 내장되어 있는 경우도 있지만 그렇지 않은 경우에는 타입모듈을 별도로 설치해줘야 한다.

 

Next.js 프로젝트를 아래와 같이 타입스크립트 형태로 구성했다면 프로젝트 루트의 package.json 파일에서 설치된 모듈들을 확인할 수 있을 것이다.

yran create next-app --typescript ${프로젝트이름}

 

아래와 같이 react 모듈 외에 @types/react 라는 타입모듈이 별도로 설치된 것을 볼 수 있다. 참고로 이처럼 타입이 별도로 나눠져 있는 모듈의 경우 타입모듈의 naming 은 @type/ 으로 시작한다.

 

이렇게 추가된 타입정보는 프로젝트의 node_modules/@types/react 디렉토리 하위에서 확인할 수 있다.

 

우리가 커스텀타입을 정의할 때는 .d.ts 파일이나 .ts 파일을 선택적으로 생성해서 정의할 수 있는데 기본적으로 아래와 같이 선언방식의 차이가 있다고 한다.(그런데 .d.ts 파일에서 .ts 파일처럼 정의해도 정상처리는 된다...)

.ts	.d.ts
var a = 1	declare var a: number
let a = 1	declare let a: number
const a = 1	declare const : 1
function a(b) { ... }	declare function a(b: number): string
class A { b() { return 3 } }	declare class A { b() : number }
namespace A { }	declare namespace A {}
type A = number	type A = number
interface A { b?: string }	interface A { b?: string }

그럼 선언방식 외에 둘의 차이점은 뭘까? .ts 파일은 표준 타입스크립트 파일로 결국 타입스크립트 컴파일러에 의해 일반 자바스크립트 문법으로 변환되지만 .d.ts 파일은 타입스크립트 컴파일러에서 참조만 할 뿐 컴파일 결과물에 포함되지 않는다.