インポートタイプ | 例 | 次の用途に使用 |
---|---|---|
module[module_import] | import * as foo from ‘…’; | TypeScript インポート |
named[destructuring_import] | import {SomeThing} from ‘…’; | TypeScript インポート |
default | import SomeThing from ‘…’; | それらを必要とするその他の外部コードに対してのみ |
side-effect | import ‘…’; | ライブラリをインポートする場合のみ、 負荷に対する副作用 (カスタム要素など) |
// 良い例:必要に応じて 2 つのオプションから選択します(下記を参照)
import * as ng from '@angular/core';
import {Foo} from './foo';
// 必要な場合のみ:デフォルトのインポート
import Button from 'Button';
// 時には、その副作用のためにライブラリをインポートする必要がありました
import 'jasmine';
import '@polymer/paper-button';
TypeScript コードは、パスを使用して他の TypeScript コードをインポートする必要があります
パスは相対的なもの、つまり . または . で始まるもの、または root/path/to/file のようにベース ディレクトリでルートされるものがあります。
コードは、同じ (論理的) プロジェクト内のファイルを参照するときに絶対インポートパス/to/foo ではなく相対インポート (./foo) を使用する必要があります。
これにより、これらのインポートに変更を加えることなくプロジェクトを移動できます。
モジュールおよびパス構造を理解するのが困難になる可能性があるため、親ステップ(../../../)の数を制限することを検討してください。
import {Symbol1} from 'path/from/root';
import {Symbol2} from '../parent/file';
import {Symbol3} from './sibling';
// 悪い例
import {Symbol4} from '../../../file';
ネームスペースと名前付きインポートの両方を使用できます。
ファイル内で頻繁に使用されるシンボル、または Jasin's description や it などの明確な名前を持つシンボルの場合は、名前付きインポートが望ましいです。
名前付きインポートは、as で必要に応じて、より明確な名前にエイリアスを付けることができます。
大規模な API から多くの異なるシンボルを使用する場合は、ネームスペースをインポートすることをお勧めします。