Typescript - 加載其他Javascript庫

一，內部環境模塊

流行的D3庫是將其功能函數定義在一個名為D3的全局對象里面。因為這個庫是通過導入script標簽（不同於模塊導入器），它的聲明使用內部模塊來定義它的習性。 為了讓typescript編譯通過，我們使用內部環境模塊來進行聲明。

declare module D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }

    export interface Event {
        x: number;
        y: number;
    }

    export interface Base extends Selectors {
        event: Event;
    }
}

declare var d3: D3.Base;

 二， 外部環境模塊

在node.js里面，大部分的任務通過導入一個或者多個模塊來完成。我們可以在頂端用每個模塊自己的.d.ts 文件來導出定義，但是更方便的做法是將它們放在一個大的.d.ts 文件里面。這樣，我們就可以使用模塊別名作為一個導入后的變量。

declare module "url" {
    export interface Url {
        protocol?: string;
        hostname?: string;
        pathname?: string;
    }

    export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}

declare module "path" {
    export function normalize(p: string): string;
    export function join(...paths: any[]): string;
    export var sep: string;
}

 我們可以這樣使用：

///<reference path="node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");

 三，模塊陷阱

在這一章，我們將描述幾種常見的使用內部或外部環境模塊的陷阱，同時描述如何避免它們。

1. 一種常見的錯誤就是使用 /// <reference>語法來引用一個外部模塊而不是導入。為了理解它們的區別，我們首先需要理解編譯器能夠定位外部模塊類型信息的三種方式：

(1) 第一種就是通過查找一個由import x = require(..) 語句聲明的.ts文件，這個文件應該是一個在頂端擁有導入或者導出聲明的可執行文件。

(2) 第二種跟第一種類似是尋找一個.d.ts的文件，但它不是一個可執行文件而是聲明文件。

(3) 最后就是外部環境模塊聲明， 我們用雙引號來引用那些模塊。

//myModules.d.ts

// In a .d.ts file or .ts file that is not an external module:
declare module "SomeModule" {
    export function fn(): string;
}

 

//myOtherModule.ts

/// <reference path="myModules.d.ts" />
import m = require("SomeModule");