活字体でJSライブラリを使用する方法

プロセスを使用してください

1.まず、異なるライブラリーは、さまざまな方法を持っているどのようなタイプライブラリクリアするには

宣言ファイル2.ルック

グローバルライブラリー、モジュールライブラリ、UMDライブラリ：JSライブラリは一般的に3つのカテゴリです。例えば、jQueryのは、あなたがモジュラー参照することもできますプレイモードを参照することにより、いずれか、UMDライブラリです。

宣言ファイル

私たちは、ライブラリを使用したいときは、TSファイル、外部被ばくのAPI、ソースコードで、時にはマニフェストファイル、追加のほとんどは、別途インストールを宣言する必要があります。このようなjQueryのような付加的なインストールパッケージ型の宣言が必要です。

幸いなことに、ライブラリのほとんどは、TSのコミュニティは、ファイルを宣言しました。種類/ライブラリ名@名前、あなたはについては、このサイトの検索に行く必要がhttp://microsoft.github.io/TypeSearch/

ない場合は、必要が自分自身を書くこと、そしてこれが地域貢献のための良い機会です。http://definitelytyped.org/guides/contributing.htmlここでは、宣言ファイルを書き込むためのいくつかの方法があります。TS宣言ファイルを書き込むとき、あなたは一時的にAPI未満を書き込むことはできませんすることができます。

ここで私は、TSファイル内の3つのライブラリを使用する方法を示します。まず、それぞれ、3つのJSファイルを作成し、グローバルライブラリー、モジュールライブラリ、UMDライブラリを表します。

//全局类库グローバルlib.js 
機能globalLib（オプション）{ 
   にconsole.log（オプション）。
} 
globalLib.version = "1.0.0"。
globalLib.doSomething =関数（）{ 
   はconsole.log（ 'globalLibは何かを'）; 
}。

//模块类库モジュール-lib.js 
constのバージョン= "1.0.0"。
関数のdoSomething（）{ 
   はconsole.log（ 'moduleLibは何かを'）; 
} 
関数moduleLib（オプション）{ 
   にconsole.log（オプション）。
} 
moduleLib.version =バージョン。
moduleLib.doSomething = doSomethingの。
module.exportsは= moduleLib。

// UMD库UMD-lib.js 
（関数（根、工場）{  
   （typeof演算=== "機能" &&定義を定義する場合。
   { 
      ）（工場を定義。 
   }もしそうでなければ（typeof演算モジュール=== "オブジェクト" && module.exportsは）
   { 
      module.exportsは=工場（）。
   }他
   { 
      root.umdLib =工場（）。
   } 
}）（これは、関数（）{ 
   リターン{ 
      バージョン： "1.0.2" 
      のdoSomething（）{ 
         にconsole.log（ 'umdLibが何かを'）; 
      } 
   } 
}）。

グローバル・ライブラリー

HTMLファイルの<script>タグでライブラリーを導入します
同じ名前で同じフォルダ内に書かれた文のJSライブラリファイル、接尾辞.d.ts
この時点では、グローバルAPI TSファイルで使用することができます

この時点で、コンパイラはエラーではなく、ブラウザのエラーが定義されていない場合、HTML路に導入されてもよいことは、相対パス、絶対パス（ルートディレクトリとしてプロジェクトディレクトリに）変更することが可能です。

宣言ファイルグローバルlib.d.ts

機能globalLib（：globalLib.Optionsオプション）：宣言するボイド。
名前空間globalLib {宣言
   constのバージョン：文字列; 
   機能doSomethingの（）：無効。
   インタフェースオプション{ 
      [キー：文字列]：任意、
   } 
}

このライブラリのTSファイルを使用します：

globalLib（{X 1}）。
globalLib.doSomething（）;

モジュールライブラリ

同じディレクトリに宣言ファイル
TSの導入

宣言ファイルモジュール-lib.d.ts

機能moduleLib（オプション：オプション）：宣言無効。
インタフェースオプション{ 
   [キー：文字列]：任意、
} 
名前空間moduleLib {宣言
   CONSTバージョン：文字列; 
   機能doSomethingの（）：無効。
} 
エクスポート= moduleLib。//这样写兼容性更好

ライブラリで使用TS

「./Libs/module-lib.js'からインポートmoduleLib。
moduleLib.doSomething（）;

UMDライブラリ

2つの方法で使用UMDライブラリ：

道のグローバルライブラリーの導入
モジュールライブラリ導入方法

これは、グローバルライブラリ、コンパイラを使用する方法に導入し、そうすることをお勧めされていないとき、あなたはtsconfig.jsonでallUmdGlobalAccess構成アイテムを開く必要がありプロンプトを排除することができます。

宣言ファイルUMD-lib.d.ts

umdLib名前空間は{DECLARE 
   constのバージョン：文字列、
   関数doSomethingのを（）：無効; 
} 
輸出AS //名前空間umdLibがライブラリに特別に準備された文、不可欠UMD 
輸出を= umdLib

TSは（もはや世界的な使用を示す）UMDライブラリを使用しました

'./Libs/umd-lib'からインポートumdLib 
umdLib.doSomething（）; 
console.log（umdLib.version）。

例：使用ではjQueryのTS（グローバルプレゼンテーションモードの導入なし）

その宣言ファイルのjQueryをインストール

NPMがインストール-D jqueryの種類@ / jqueryの

使用します。

'jqueryの'からの輸入$; 
$（ "アプリ"）、CSS（"色"、 "赤"）。

ライブラリ用のプラグインを追加します。

カスタムメソッドを追加するためのライブラリです

どのプラグインモジュールUMDライブラリとライブラリのメソッドを追加することに合意しました。

グローバルメソッドがために、//カスタムライブラリを追加
グローバル{DECLARE 
   名前空間{globalLibの
      関数MyFunctionを（）：無効
   } 
} 
globalLib.myFunction =（）=> {はconsole.log（ "グローバルウィジェット"）}; 

//は、モジュールライブラリでありますカスタムメソッドを追加
{Module1の"./Libs/module-lib.js"宣言
   ;ボイドエクスポート関数MyFunctionを（）を
クラスライブラリモジュール-LIB MyFunctionをメソッドの宣言//} 
moduleLib.myFunction =（）=> {にconsole.logを（ "Module1のウィジェット"）}; //カスタムメソッドを定義

UMDライブラリがカスタムメソッドを追加// 
Module1の"./Libs/umd-lib.js"をDECLARE { 
   エクスポート関数MyFunctionを（）：ボイド; 
} // UMDあります-libライブラリ宣言MyFunctionをメソッド
umdLib.myFunction =（）=> {にconsole.log （ "UMD ウィジェット"）}; //定義カスタムメソッド

globalLib.myFunction（）; 
moduleLib.myFunction（）。
umdLib.myFunction（）;

瞬間をライブラリとして例えば、カスタムメソッドを追加します（jQueryの公式APIを使用する必要はありません）

NPMインストール-Dタイプ/モーメント@一瞬

「瞬間」からインポートメートルを。
モジュールの瞬間'{宣言
   エクスポート関数MyFunctionを（）：ボイド。
} 
m.myFunction =（）=> {にconsole.log（ "瞬間插件"）}。

m.myFunction（）;