타입스크립트에게 내 자바스크립트 모듈에대한 타입체크 및 함수설명을 시켜보자 / d.ts 파일 (Declaration)

타입체크는 타입스크립트의 가장 강력한 기능이다.

하지만 모든 자바스크립트 모듈에 자동적으로 적용되지 않는다.

 

타입체크가 수행되기 위해선,

사전에 체크할 타입에 대한 정보를 담고 있는 선언 파일

을 등록해 주어야 한다.

 

 

타입체크를 지원받을 기본 모듈은 다음위치에 입력되어 있다.

tsconfig.json /  complierOption 오브젝트 / "lib" 성분

 

ES6과 DOM 을 체크한다.

 

 

위의 "lib" 성분이 ES6과 DOM을 포함하기에, 우리는 

ES6 자바스크립트와 DOM에 대한 타입체크를 지원받을 수 있다.

 

 

*예시 타입스크립트가 제공하는 정보: DOM의 querySelector

타입체크 및 메서드 설명

 

위의 사진을 보면 querySelector가 입력받는 인자의 타입 그리고 메서드에 대한 설명을 살펴볼 수 있다.

 

 

* Returns the first element that is a descendant of node that maches selectors

: 선택자와 일치하는 노드 자손의 첫 번째 요소를 반환합니다.

 

 

 

한계

하지만 "lib" 성분에는 DOM,이나 ES6 같은 제한된 키워드만 집어넣을 수 있다.

 

회사생활이나 개인프로젝트를 포함하여 개발을 하다 보면,

github에서 다운로드한 자바스크립트 모듈, 또는 회사내부 자바스크립트 모듈을 사용하는 일이 발생한다.

 

당연히 타입정보가 없는 순수 자바스크립트 코드에 대해서,

타입스크립트는 타입체크 기능을 제공하지 않는다.

 

그렇다면  "임의의 자바스크립트" 모듈을 사용할 때, 어떻게 타입체크 기능을 지원받을 수 있을까?

 

 

해답

 

타입스크립트는 d.ts (Declaration) 파일에서 타입에 대한 정보를 가져온다.

 

따라서  d.ts 확장자 명을 갖는 파일을 만들고,  모듈의 타입명세를 직접 작성하면

그 모듈에대한 타입체크를 받을 수 있다.

 

 

querySelector에 대한 설명을 다시 살펴보자

 

파란 글씨로 써진 좌표값은 다음과 같은 의미를 갖는다.

 

lib.dom.d.ts 파일의 10705번 줄, 58번 요소에 타입설명이 되어있음

 

 

 

이제 예시를 통해 직접 모듈의 타입체크를 구현해 보자

 

예시: 임의의 모듈에 대한 타입체크 추가하기

다음은 내가 작성한 자바스크립트 모듈이다.

//declaration.js

module.export = {
    //콘솔에 입력받은 이름과 인사를 출력하는 함수
    greetWithName: function(name) {
    console.log(`Hello, ${name}!`);
  },
  
  // 콘솔에 입력받은 문자열을 두개 이어붙인 문자열을 출력하는 함수
  doubleString: function(inputString){
    output = inputString + inputString;
    return output
}
}

 

 

 

타입스크립트에서 이 모듈을 불러와서 사용해 보자.

숫자를 입력받는 두 함수

 

두 함수모두 숫자를 입력받았지만, 타입스크립트는 아무런 타입체크를 실행하지 않는다.

왜냐하면 검사할 타입에 대한 정보가 전혀 없기 때문이다.

 

.d.ts: 타입코드 작성하기

 

declare module 키워드로 "declaration" 모듈을 선언한 후

타입스크립트가 검사할 함수의 호출 시그니처를 작성하면 된다.

 

//declaration.d.ts 파일
 
declare module "declaration" {
    function greetWithName(input:string): string;
    function doubleString(input:string): string;
}

string을 받아서 string을 내보내는 함수이다.

위 코드파일을 저장한 후에, 기존의 타입스크립트 파일을 확인해 보자.

 

 

인자에 빨간줄이 그어져있다.

이제 타입스크립트가 나의 커스텀모듈에 대한 타입체크를 해주고 있다.

 

 

 

 

붉은 줄 위에 마우스 포인터를 올려보면 다음과 같은 오류메시지가 표시된다.

 

number 타입의 인자가아닌 string 타입의 인자를 입력하라는 문구

 

 

함수에 string 타입의 인자를 대입하면 오류가 사라지는 것을 볼 수 있다.

 

예시: 함수의 설명 추가하기

이제 에러메시지와 함께 출력될 함수에 대한 설명도 추가해 보자.

/**이형태의 주석을 함수위에 써주면된다.*/

 

주석을 추가한 declaration.d.ts 코드

declare module "declaration" {
    /** 이 함수는 Hello + 입력받은 string을 출력합니다. */
    function greetWithName(input:string): string;
    /**이 함수는 입력받은 string하나를 2번이어붙인 string을 출력합니다.  */
    function doubleString(input:string): string;
}

 

이제 함수에 마우스 포인터를 가져다 대면 내가 추가한 설명을 읽을 수 있다.

 

 

읽어주셔서 감사합니다

 

오탈자나 오류가 있으면 댓글로 알려주세요.