타입 정의 파일

타입 정의 파일(type definition files)는 타입스크립트 컴파일러에게 자바스크립 라이브러리 API 타입을 알려준다. 타입 정의 파일은 자바스크립트 라이브러리 내 변수 이름과 함수 시그니처에 타입을 추가한다. 이로써 타입스크립트가 자바스크립트 라이브러리 내 멤버 이름과 타임을 읽을 수 있게 된다.

타입 파일들은 npmjs.org에 @types 조직으로 등록되어 있고, 자바스크립트 라이브러리 관련 타입 정의 파일을 위한 저장소다.

타입 정의 파일은 d.ts. 로 끝내야한다.

타입 정의 파일은 타입 선언만 가질 수 있다.

// JqueryStatic.d.ts

declare const Sizzle: SizzleStatic;
export declare function findNodes(node:ts.Node): ts.Node[];

위에서 declare의 목적은 const Sizzle 또는 findeNode() 함수를 선언하는 것이 아닌, const Sizzle, findeNode() 선언이 포함된 자바스크립트 라이브러리를 사용하고자 하는 것이다.

즉, 타입스크립트 컴파일러에게 Sizzle 또는 findeNode()가 표시되도 놀라지마, 런타임 중 이 타입을 가진 자바스크립트가 사용될 거야 와 같은 의미다.

위와 같은 선언은 주변 선언이라 부르며, 구현없이 타입만 선언하는 것으로, 해당 변수가 런타임에 존재함을 의미한다. 이렇게 타입 정의 파일로 자바스크립트 라이브러리와 타입 정의 언어의 이점을 누릴 수 있다.

일부 자바스크립트 라이브러리는 d.ts. 파일이 있어, 별도 타입 정의 라이브러리를 추가하지 않아도 된다.

shim과 같은 타입 정의

shim은 IE 같은 구버전 브라우저의 API를 가로채 ES6 표준에 맞게 변경해주는 라이브러리다. `

const data = [1, 2, 3, 4, 5];
const index = data.find(item => item > 3);

// 위 코드는 ES6에서는 동작하지만, ES6을 지원하지 않는 IE11에서 실행하려면
// tsconfig.json 옵션에서 "target":ES5를 설정해야한다.

// 하지만, ES5에서는 finde() 메서드를 지원하지 않기 때문에 오류 메세지가 뜨며, 자동완성애서도
// find를 찾을 수 없다.

이를 해결하기 위해 shim 라이브러리를 이용한다.

npm install -D @types/es6-shim

// 이후 tsconfig.json에 "type":["jquery", "es6-shim"]을 추가하면 된다.

커스텀 타입 정의 파일

// hello.js

function greeting(name) {
  console.log(`${name} hi`);
}

// typing.d.ts
declare function greeting(name: string): void;

/// <reference path="src/typing.d.ts"/>

greeting("hi");

자바스크립트 프로젝트에 타입스크립트 도입

실제 현업에서 기존 자바스크립트 프로젝트를 타입스크립트로 바꿀 수 있을까?

타입스크립트는 타입지정을 선택사항으로 둘 수 있다. 즉 자바스크립트 코드 내 선언된 변수나 함수 파라미터를 바꾸지 않아도 된다.

처음부터 타입스크립트 컴파일러를 자바스크립트 앱에 가져오지 않는 이유는??

기존 자바스크립트 앱에 수만 줄의 코드가 있을 것이고, tsc를 사용해 모든 코드를 컴파일하면 숨겨진 버그가 발생하고 배포 프로세스도 현저하게 느려질 수 있기 때문이다.

• 타입스크립트 컴파일러 옵션에 allowJs:true를 추가한다.
  • tsc에게 ts파일 뿐만 아니라, js 파일도 컴파일 할 것이다. js 파일의 타입 검사는 하지 말고, 컴파일러 옵션 target에 맞춰 변환하기만 하면 돼! 라고 말해주는 것
• //@ts-nocheck 주석을 통해 검사를 건너 뛸 수 있다.
• checkJs:tre를 설정하지 않고, //@ts-check 주석을 추가해 일부 .js 파일만 검사하도록 지시할 수 있다.
• //@ts-ignore 주석을 통해 해당 코드 줄에 대한 타입 검사를 무시할 수 있다.

Summary

• 타입스크립트 프로젝트에서 자바스크립트 라이브러리를 활용할 수 있다.
• 타입 정의 파일은 자바스크립트 라이브러리에 대한 타입 검사와 자동 완성 기능을 열어준다. 이 덕분에 생산적으로 코드를 작성할 수 있다.
• 커스텀 타입 정의 파일을 사용할 수있다.
• 타입 정의가 없는 자바스크립트 라이브러리라도 타입 스크립트 프로젝트에서 사용할 수 있다.