TypeScript
外部ライブラリのインポート
サーチ…
構文
-
import {component} from 'libName'; // Will import the class "component"
-
import {component as c} from 'libName'; // Will import the class "component" into a "c" object
-
import component from 'libname'; // Will import the default export from libName
-
import * as lib from 'libName'; // Will import everything from libName into a "lib" object
-
import lib = require('libName'); // Will import everything from libName into a "lib" object
-
const lib: any = require('libName'); // Will import everything from libName into a "lib" object
-
import 'libName'; // Will import libName module for its side effects only
備考
この構文では、
import * as lib from 'libName';
そして
import lib = require('libName');
同じものですが、そうではありません!
TypeScript固有のexport =
構文でexport =
されたPersonクラスをインポートしたいと考えてみましょう:
class Person {
...
}
export = Person;
この場合、es6構文でインポートすることはできません(コンパイル時にエラーが発生します)。TypeScript固有のimport =
構文を使用する必要があります。
import * as Person from 'Person'; //compile error
import Person = require('Person'); //OK
逆の言い方をすると、クラシックモジュールは2番目の構文でインポートすることができます。最後の構文は、すべてのエクスポートをインポートできるのでより強力です。
詳細については、 公式文書を参照してください。
npmからモジュールをインポートする
モジュールの型定義ファイル(d.ts)がある場合は、 import
文を使用できます。
import _ = require('lodash');
モジュールの定義ファイルがない場合、インポートしようとしているモジュールが見つからないため、コンパイル時にエラーがスローされます。
この場合、通常の実行時require
機能を使用してモジュールをインポートすることができます。ただし、これはany
型として返されます。
// The _ variable is of type any, so TypeScript will not perform any type checking.
const _: any = require('lodash');
TypeScript 2.0では、 モジュールの型定義ファイルがないときにモジュールが存在することをTypeScriptに伝えるために、 省略形の周囲モジュール宣言を使用することもできます。この場合、TypeScriptは有意義な型検査を提供することはできません。
declare module "lodash";
// you can now import from lodash in any way you wish:
import { flatten } from "lodash";
import * as _ from "lodash";
TypeScript 2.1以降、ルールはさらに緩和されました。さて、あなたのnode_modules
ディレクトリにモジュールが存在する限り、どこにでもモジュール宣言がなくても、それをインポートすることができます。 ( --noImplicitAny
コンパイラオプションを使用している場合は、以下に警告が生成されます)。
// Will work if `node_modules/someModule/index.js` exists, or if `node_modules/someModule/package.json` has a valid "main" entry point
import { foo } from "someModule";
定義ファイルの検索
typescript 2.xの場合:
DefinitelyTypedの定義は@types npmパッケージから入手できます
npm i --save lodash
npm i --save-dev @types/lodash
しかし、他のリポジトリからの使用タイプが必要な場合は、古い方法で使用することができます:
typescript 1.xの場合:
Typingsはタイプ定義ファイルをローカルプロジェクトに自動的にインストールできるnpmパッケージです。 クイックスタートを読むことをお勧めします。
npm install -global typings
これで入力用のcliにアクセスできるようになりました。
最初のステップは、プロジェクトで使用されているパッケージを検索することです
typings search lodash NAME SOURCE HOMEPAGE DESCRIPTION VERSIONS UPDATED lodash dt http://lodash.com/ 2 2016-07-20T00:13:09.000Z lodash global 1 2016-07-01T20:51:07.000Z lodash npm https://www.npmjs.com/package/lodash 1 2016-07-01T20:51:07.000Z
次に、どのソースをインストールするかを決めます。私はコミュニティが入力を編集できるGitHubリポジトリのDefinitelyTypedの略であるdtを使用します。これは通常、最近更新されたものです。
入力ファイルをインストールする
typings install dt~lodash --global --save
最後のコマンドを分解しましょう。私たちはプロジェクトのグローバル入力ファイルとしてDefinitelyTypedバージョンのlodashをインストールし、それをtypings.json
依存関係として保存しています。今度はlodashをインポートするたびに、typescriptはlodash型指定ファイルをロードします。
開発環境でのみ使用される入力をインストールしたい場合、--save
--save-dev
フラグを指定することができます:typings install chai --save-dev
入力なしのグローバル外部ライブラリの使用
モジュールは理想的ですが、使用しているライブラリがscript
タグによってロードされたため、グローバル変数($や_など)によって参照されている場合は、参照するためにアンビエント宣言を作成できます。
declare const _: any;
typescript 2.xによる定義ファイルの検索
typescriptの2.xバージョンでは、入力はnpm @typesリポジトリから利用可能になりました。これらはtypescriptコンパイラによって自動的に解決され、はるかに簡単に使用できます。
タイプ定義をインストールするには、プロジェクトのpackage.jsonにdevの依存関係としてインストールするだけです
例えば
npm i -S lodash
npm i -D @types/lodash
インストール後に、以前のようにモジュールを使用するだけです
import * as _ from 'lodash'