アンビエント宣言

宣言

このエントリーをはてなブックマークに追加
最終更新日 2016-12-31

アンビエント宣言は、他のコンポーネント(例えば Web ブラウザや既存の JavaScript ライブラリ)から変数や関数などが提供されることを TypeScript コンパイラに伝えます。これは、既存の JavaScript ライブラリに静的型付けし、TypeScript で利用可能になることを意味します。 次に示すのは、アンビエント宣言の書式です。

// 変数のアンビエント宣言
declare var 変数名: 型名;

// 関数のアンビエント宣言
declare function 関数名(引数名: 引数の型名): 戻り値の型名;

// クラスのアンビエント宣言
declare class クラス名 {
    // コンストラクタ
    constructor(引数名: 引数の型名);
    
    // インスタンスメンバ
    アクセス修飾子 メンバ変数名: メンバ変数の型名;
    アクセス修飾子 メンバ関数名(引数名: 引数の型名): 戻り値の型名;
    
    // 静的メンバ
    static メンバ変数名: メンバ変数の型名;
    static メンバ関数名(引数名: 引数の型名): 戻り値の型名;
}

// 内部モジュールのアンビエント宣言
declare module モジュール名 {
    モジュール本体;
}

// 外部モジュールのアンビエント宣言
declare module "モジュール名" {
    モジュール本体;
}

アンビエント宣言には関数の本体を含みません。 また、アンビエント宣言はコンパイルによって出力されないため、コンパイル後の JavaScript コードに影響を与えません。

アンビエント宣言は専用のファイルに記述することができます。 これは宣言ソースファイルと呼ばれ、ファイルの拡張子は .d.ts です。

// foo.d.ts
declare var fooVariable: string;

declare function fooFunction(): string;

declare class FooClass {
    public bar(): string;
}

declare module FooModule {
    export function bar(): string;
}

declare module "fooModule" {
    export function bar(): string;
}

interface FooInterface {
    bar(): string;
}

なお、宣言ソースファイルに記述できるのは宣言に制限されるため、関数の本体を持たない interface なども記述できます。

宣言ソースファイルを TypeScript の実装ソースファイルで参照するには /// <reference path="宣言ソースファイルパス" /> を使用します。

// main.ts
/// <reference path="foo.d.ts" />

var result1 = fooVariable;

var result2 = fooFunction();

var result3 = new FooClass;

var result4 = FooModule.bar();

import m = require("fooModule");
var result5 = m.bar();

class Bar implements FooInterface {
    public bar(): string {
        return "TypeScript";
    }
}

ところで、TypeScript では console.log などを呼び出してもコンパイルエラーにはなりません。 これは、TypeScript コンパイラがデフォルトで lib.d.ts という宣言ソースファイルを利用しており、 lib.d.ts には次のようなアンビエント宣言が記述されているためです。

// lib.d.ts
declare var console: Console;

以下のサイトでは、各種 JavaScript ライブラリの宣言ソースファイルが用意されています。