타입스크립트 10일차 - 서드파티 라이브러리와 타입 정의 파일

타입스크립트와 JS 서드 파티 라이브러리

자바스크립트의 오픈소스 생태계는 풍성하고 수많은 업체와 개발자가 자바스크립트 생태계를 발전시켜 왔습니다.

타입스크립트는 JS와 비교해도 그렇고 출시년도도 2012년도로 상당히 신생언어지만 ECMA스크립트의 표준을 따름으로써 자바스크립트의 생태계를 포함할 수 있게 되었습니다.

1
2
3
4
5
6
7
재미로 보는 몇가지 언어의 개발년도
Go lang : 2012
Dart : 2011
React : 2013
Vue : 2014
Kotlin : 2011
Swift : 2014

자바스크립트의 프로젝트의 대부분은 라이브러리로 공개되어 있습니다.

제 3자에 해당하는 개발자, 업체에 의해 개발되므로 서드 파티 라이브러리라고 불립니다. 대표적인 라이브러리는 jQuery, Angular, React, Vue 등이 있습니다.

https://gitstar-ranking.com/repositories - 깃허브 Star랭킹

이들 자바스크립트를 타입스크립트에서 사용하려면 *.d.ts 파일로 된 타입 정의 파일이 있어야 합니다.

타입스크립트 컴파일러는 타입 정의 파일을 사용해서 구조를 이해한 후 컴파일 합니다.

타입 정의 파일에 대한 저장소

JS기반으로 된 언어답게 외부 서드파티의 자바스크립트 라이브러리를 기본적으로 사용할 수 있습니다만 타입스크립트 프로젝트에서 인식하기가 어려우므로 타입 정의 파일이라는 중간 매개 파일이 필요합니다.

타입 정의 파일은 깃허브에 위치한 타입 정의 파일에 대한 저장소에서 확인할 수 있습니다. 4-4일 기준 4805개의 타입이 등록되어 있습니다.

이곳에는 타입스크립트로 포함해서 사용할 수 있도록 개발자들이 작성해놓은 타입파일이 저장되어 있습니다.

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react - react의 타입저장소

라이브러리와 타입 정의 파일 설치하기

타입스크립트 정의 파일을 설치하는 방법은 1.x 대에서 사용하는 typing이라는 도구를 이용하는 방법과 2.x에서 사용하는 npm으로 자동 설치하는 방식이 있습니다.

뭘 쓸지 모르니 둘 다 알아야 한다고 합니다.

1.x 설치하기

테스트 환경설정을 위해 기본환경설정을 합니다.

tsc --init + npm init 를 실행 후 책에 나와 있는 underscore를 설치해 봅시다.

npm install --save underscore@1.8.3을 실행합니다.

설치한 underscore 라이브러리를 사용하려고 import 하는데 오류가 발생합니다.

what the f...

자바스크립트 패키지를 타입스크립트에서 인식시키려고 하면 타입 정의 파일을 설치해야 합니다.

먼저 1.x에서 쓰이는 typing 도구를 설치합니다. (npm install -g typings)

그 후 typings search underscore 명령어로 검색한 후 아래와 같은 검색결과 중 선택해서 쓰시면 됩니다.

1
2
3
4
5
6
Viewing 3 of 3

NAME SOURCE HOMEPAGE DESCRIPTION VERSIONS UPDATED
underscore dt http://underscorejs.org/ 2 2017-03-06T10:04:25.000Z
underscore-ko dt https://github.com/kamranayub/UnderscoreKO 1 2016-08-03T18:11:25.000Z
underscore.string dt https://github.com/epeli/underscore.string 2 2016-07-25T23:10:34.000Z

설치 명령어는 typings install dt~underscore --global --save 이런식으로 사용하시면 됩니다.

인식됨

근데 deprecated 되었으므로 2.x를 활용하는게 좋습니다.

deprecated

2.x~최신버전 설치하기

타입스크립트가 2.x 버전으로 업그레이드 되면서 @types/패키지명을 사용하여 사용이 가능해졌습니다.

기본 저장폴더는 node_modules 폴더에 설치되지만 tsconfig.json 파일에서 compilerOptions/typeRoots를 json형식으로 지정하여 원하는 폴더에 설치가 가능합니다.

compilerOptions/types형식으로 설치된 수많은 타입 중 원하는 형식의 타입만 가져와서 사용할 수도 있다고 합니다.

타입은 http://microsoft.github.io/TypeSearch/에서 검색이 가능합니다.

예를 들어 여러분이 underscore를 설치한다고 생각해봅시다.

npm show @types/underscore versions이라는 명령어로 해당 라이브러리의 버전을 볼 수 있으며 npm install --save-dev @types/underscore@버전이라는 명령어로 설치 가능합니다.

잘 설치해서 쓰시면 됩니다.

타입 정의 파일

타입 정의 파일은 타입이 없는 자바스크립트 라이브러리에 대한 타입 정보를 타입스크립트 컴파일러에게 전달해 컴파일 수행을 도와주는 파일입니다.

.d.ts 확장자를 사용하며 자바스크립트 라이브러리에는 없는 타입 정보나 구조 정보를 인식해 API로 사용할 수 있도록 도와줍니다.

타입스크립트에 쓰일 순수 JS에는 타입이 없으므로 직접 정의해서 파일을 별도로 배포해야 합니다. 컴파일러는 이 타입정의파일을 타입을 검사하거나 코드 어시스트, 컴파일 에러를 표시할 때 사용합니다.

외부로 공개된 모듈은 보통 export로 선언되는데 이 모듈의 JS 구현 환경에 대한 정보를 declare 키워드를 이용해 선언합니다. 이러한 선언을 앰비언트 선언이라고 합니다.

Typescript 파일에서 생성되지 않는 변수 등을 선언한다고 보셔도 됩니다.

전역 스페이스 오염방지를 포함한 책에 나온 사용법은 다음과 같습니다.

1
2
3
4
5
6
7
declare module 모듈명 {
export interface url{
protocol?: string;
hostname?: string;
port?: string;
}
}

물론 모듈과 네임스페이스는 동등하게 사용되므로 네임스페이스를 사용해도 됩니다.

그런데 매번 선언하려면 귀찮으므로 축약해 선언할 수도 있습니다. declare mylibrary {...} 이런식으로 말이죠.

또한 선언되어있는 라이브러리를 import 한 후 다른 네임스페이스를 사용하면 확장또한 가능합니다.

1
2
3
4
5
6
7
import * as mylibrary from 'mylibrary';

declare module mylibrary{protocol
namespace myplugin{
//TODO
}
}

라이브러리 사용시 d.ts 파일을 사용해 호출하기

타입 정의 파일은 수동으로 구축도 가능하지만 만약 프로젝트가 타입스크립트 기반이라면 명령어를 통해 타입 정의 파일을 추출할 수 있습니다.

tsc ts파일명 -d --outDir 폴더명 으로 간단하게 입력이 가능합니다.

기본적으로 외부에서 접근할 필요가 있는 것에 대해서만 타입 정의를 하며 불필요한 파일에 대해서는 정의하지 않습니다.

책에 있는 예제를 쓴다면 다음과 같은 코드가 있습니다.

1
2
3
4
5
6
7
8
9
10
11
export namespace MyLibrary {

export function getMaxNumber(array: number[]): number {
return Math.max.apply(Math, array);
}

function getMinNumber(array: number[]): number {
return Math.min.apply(Math, array);
}

}

이럴 때 getMinNumber는 읽을 필요가 없으므로 tsc my.ts -d --outDir dts라고 입력한다면 다음과 같은 코드가 남습니다.

1
2
3
export declare namespace MyLibrary {
function getMaxNumber(array: number[]): number;
}

만약 getMinNumber가 필요하다면 export로 선언해 주면 됩니다.

이상으로 마치겠습니다.