Typescript Practice - Block Chain Project - Basic

tsconfig - lib

기본 설정은 끝냈다 가정하고, tsconfig.json의 속성중 몇가지에 대해 알아보도록 하겠습니다. 우선 "lib"입니다. 보통 설치한 타입스크립트 모듈에 lib파일들이 있습니다. 예를 들어, npm install -g typescript를 하게 되면, /usr/local/lib/node_modules/typescript에 설치가 됩니다.

다음과 같이 ECMAScript 규격에 정의된 자바스크립트 객체들에 대한 인터페이스들이 정의되어 있는 것을 보실 수 있습니다.

 

~~/lib.dom.d.ts

    prepend(...nodes: (Node | string)[]): void;
    /** Returns the first element that is a descendant of node that matches selectors. */
    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
    querySelector<E extends Element = Element>(selectors: string): E | null;
    /** Returns all element descendants of node that match selectors. */
    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

다음과 같이 Browser API에 해당하는 Type들이 정의되어 있습니다.

 

즉 lib키워드는 지금 이 코드는 Browser에서 실행될 꺼니까 이 모든 자동완성을 제공해줘~ 라는 의미의 아이입니다.

다음과 같이 LocalStorage의 메소드의 타입이 자동완성으로 제공됩니다.

 

또한 (Math)와 같이 기본 JS APi들은 자동완성이 Default로 제공됩니다.

 

tsconfig - Declare files

타입스크립트가 localStorage, Math, window등의 타입을 이해하고 인지한다는 것을 이제 알았습니다. 하지만 이것을 어떻게 타입스크립트가 아는 것일까요?  ts의 공식문서에는 다음과 같은 글이 있습니다.

TypeScript includes a default set of type definitions for built-in JS APIs (like Math), as well as type definitions forthings found in browser environments (like document). TypeScript also includes APIs for newer JS features matching the target you specify; for example the definition for Map is available if target is ES6 or newer.

즉 타입스크립트가 기본적인 타입 정의는 가지고 있다는 것입니다. 

 

타입스크립트는 우리가 자바스크립트를 사용할 수 있게 해 줍니다. 하지만 타입스크립트에게 우리가 불러올 자바스크립트 함수 모양을 설명하려면 타입 정의가 필요합니다. 대부분의 경우 우리는 JS로 만들어진 패키지를 사용할 텐데, 그래서 우리는 타입스크립트에게 그 자바스크립트 파일의 모양을 설명 해 주어야 하는 겁니다!

 

저희는 우선 src안에 myPackage.js파일을 작성해 주도록 하겠습니다. 저희는 지금부터 마치 이것이 node_modules의 라이브러리 중 하나로 작동한다고 가정해 보도록 하겠습니다. 그리고 index.ts에서 이를 import해서 사용해보도록 하겠습니다.

 

src/myPacakge.js

export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

다음과 같이 init, exit의 두가지 함수를 export했습니다. 

만약 여기서 바로 index.ts에서 

src/index.ts

import { init, exit } from "myPackage";

를 하게 되면 오류가 나게 됩니다. (tsconfig.json 에서 strict: "true")라고 했을 때만 말이죠. 이 오류를 없애는 법은 간단합니다. 이 ts파일에서 myPackage.js에서 export된 것의 Type을 알게 해주면 됩니다. 이를 위해서 저희는 src에 myPacakge.d.ts를 작성해 보도록 하겠습니다. 

src/myPackage.d.ts

interface Config {
  url: string;
}

declare module "myPackage" {
  function init(config: Config): boolean;
  function exit(code: number): number;
}

다음과 같이 작성해 주면 감쪽같이 index.ts에서의 오류가 없어져 있을 것입니다.

src/index.ts

import { init, exit } from "myPackage";

init({
  url: "true",
});

exit(1);

이 코드가 자동완성도 지원하고, 잘 돌아가는 것을 확인해 볼 수 있을 겁니다. 이게 바로 index.ts에서 document를 치고 (cmd + 클릭)을 했을 때 lib.dom.ts로 가는 것과 같은 방식입니다. 이는 엄청 멋진 누군가가 localStorage의 모양을 설명하기 위해 작성한 것이라고 할 수 있겠습니다!!

 

JSDoc

우선 declare파일을 지우고 그냥 js파일을 import하게 바꿔봅시다.

src/index.ts

import { init, exit } from "./myPackage";

그러면 오류가 날 탠데, ts project에서 js파일을 허용하게 하려면 tsconfig.json의 allowJS: true를 주면 됩니다.

 

이 상태에서는 타입스크립트가 myPacakge.js에 존재하는 함수들의 호출 시그니처를 추론 해줄 수 있게 됩니다. 이렇게 자바스크립트 파일과 타입스크립트 파일을 섞어서 프로젝트를 진행해도 괜찮습니다. 옛날 코드는 자바스크립트로 작성하고 새로운 코드는 타입스크립트로 작성하면 되기 때문이죠. 하지만 타입스크립트 파일이 자바스크립트 파일을 확인하게도 하고 싶고, 완전히 타입스크립트로 이전하고 싶지는 않다면 다음과 같은 방법을 사용하면 됩니다.

 

만약 코드가 몇 천 줄이나 되는 프로젝트가 있다고 가정해 봅시다. 당장 코드를 변경하고, 삭제하고 싶지는 않을겁니다. 코드가 엄청 많을 때는 파일은 그냥 자바스크립트 파일인 채로 두는 것이 좋습니다. 

 

자바스크립트에 보호 장치를 더하는 방법은 그냥 코멘트를 더하면 됩니다.!! 다음 예제를 한번 봅시다. 

src/myPacakge.js

// @ts-check
/**
 * Initializes the project
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function init(config) {
  return true;
}

/**
 * Exits the program
 * @param {number} code
 * @returns number
 */
export function exit(code) {
  return code + 1;
}

여기서 맨 위에 //@ts-check을 작성해 주게 되면, Typescript의 타입 체킹을 js에서 지원해주게 됩니다. 여기다가 JSDoc의 주석을 달게 되면 타입 추론이 ts파일에서 가능해 지게 되는 것입니다.

다음과 같이 주석과 파라미터의 타입을 추론이 JSDoc의 주석으로 써준대로 작성된 것을 보실 수 있습니다.

src/index.ts

import { init, exit } from "./myPackage";

init({ debug: true, url: ".." });
exit(1);

이제 이렇게 js코드를 불러와 ts의 type-checking을 받으며 사용할 수 있게 된겁니다.