[Chapter 5 - Declaration] Writing declaration file

[junthus]

integrate with external lib

외부 (js) 라이브러리를 내 ts 프로젝트에서 쓰기

namespace 만들기

1. 라이브러리 구조를 스윽 확인

   • 글로벌(전역변수를 가지는) 라이브러리인지 ? / 모듈러(import) 라이브러리인지?

   • (내가 쓸) 기능은 어떤 구조 안에 있는지 ?

     // external.js
     var ErrorHelper = (function () {
     return {
     containsErrors: function (response) {
         if (!response || !response.responseText) {
             return false;
         }
     
         var errorValue = response.responseText;
     
         if (String(errorValue.failure) == "true" || Boolean(errorValue.failure)) {
             return true;
         }
     
         return false;
     },
     trace: function (msg) {
         var traceMessage = msg;
     
         if (msg.responseText) {
             traceMessage = msg.responseText.errorMessage;
         }
     
         console.log("[" + new Date().toLocaleDateString() + "] " + traceMessage);
     }
     }
     })();

소스는 확인하기 귀찮으니 어떤 식으로 쓰는지를 알면 좋음

var failureMessage = {
    responseText: {
        "failure": true,
        "errorMessage": "Message From failureMessage"
    }
};

var failureMessageString = {
    responseText: {
        "failure": "true",
        "errorMessage": "Message from failureMessageString"
    }
};

var successMessage = {
    responseText: {
        "failure": false
    }
};

if (ErrorHelper.containsErrors(failureMessage)) {
    ErrorHelper.trace(failureMessage);
}

if (ErrorHelper.containsErrors(failureMessageString)) {
    ErrorHelper.trace(failureMessageString);
}

if (!ErrorHelper.containsErrors(successMessage)) {
    ErrorHelper.trace("success");
}

2. 쓴다 TS

   window.onload = () => {
   var failureMessage = {
       responseText: {
           "failure": true,
           "errorMessage": "Error Message from Typescript"
       }
   };
   
   if (ErrorHelper.containsErrors(failureMessage))
       ErrorHelper.trace(failureMessage);
   }

3. 에러난다. .d.ts를 만든다.

   declare namespace ErrorHelper { 
   function containsErrors(response);
   function trace(message);
   }

ambient namespace/module

declare namespace ${module_name} {
   // ...
}

• 사용하려는 자바 스크립트의 클로저 변수 이름과 같아야 함
• 원래 module을 namespace 개념으로 쓰다가(?) 1.5 v 부터 namespace 사용 권고, 그러나 컴파일은 됨. 1.5v 부터 module은 es6의 module 개념으로 용어 변경.
• 외부 모듈이 module 형태라 import 구문으로 쓰려면 [module 키워드를 써야 하는듯] (http://www.typescriptlang.org/docs/handbook/modules.html#working-with-other-javascript-libraries)

  // index.d.ts
  declare module "test" {
      export function parse(string: string): string;
  }

  // my.ts
  import * as Test from "test";

interface 만들기

위의 예제는 module 까지만 정의하면 일단 에러는 안 난다. 그러나 function의 arguments 구조도 정의해 두면 코딩하는 시점에 런타임 에러를 미리 예방할 수 있다.

// index.d.ts
interface IResponse {
    responseText: IFailureMessage;
}
interface IFailureMessage {
    failure: boolean;
    errorMessage: string;
}

declare module ErrorHelper {
    function containsErrors(response: IResponse);
    function trace(message: IResponse);
}

Union types

위에서 살펴봤듯이 response 포맷이 난장판이었다. 일단 에러가 나지 않도록 해 두고 API 담당자를 때리러 간다.

(위에 있는것과 동일)
var failureMessage = {
    responseText: {
        "failure": true,
        "errorMessage": "Message From failureMessage"
    }
};

var failureMessageString = {
    responseText: {
        "failure": "true",
        "dummy": 0, //  가정 
        "errorMessage": "Message from failureMessageString"
    }
};

// index.d.ts
interface IResponse {
    responseText: IFailureMessage | ;
}
interface IFailureMessage {
    failure: boolean | string;
    dummy?: number; // 공통이 아닌 필드는 ? 로 처리한다.
    errorMessage: string;
}

declare module ErrorHelper {
    function containsErrors(response: IResponse);
    function trace(message: IResponse);
}

Module merging

ts 컴파일러가 찾은 .d.ts 선언 파일 중 동일한 모듈 이름이 포함되어 있으면 컴파일러가 두 선언 파일을 병합하고 모듈 선언의 결합 된 버전을 사용함.

• test1.d.ts 에 이렇게 써 놓고

  declare module Test {
          function functionA();
  }

• test2.d.ts 에 이렇게 써 놓으면

  declare module Test {
          function functionB();
  }

• ts는 이렇게 봄

  declare module Test {
          function functionA();
          function functionB();
  }

• 머지되는건 모듈뿐
  • 모듈은 인터페이스, 클래스 및 enum과도 머지됨
  • 클래스는 다른 클래스/변수/인터페이스와 병합이 안 됨, 두 번 선언하면 그냥 에러.