目次



1. Source file structure

1.1 Imports

インポートタイプ 次の用途に使用
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';

1.1.1 Import paths

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';

1.1.2 Namespace versus named imports

ネームスペースと名前付きインポートの両方を使用できます。

ファイル内で頻繁に使用されるシンボル、または Jasin's description や it などの明確な名前を持つシンボルの場合は、名前付きインポートが望ましいです。

名前付きインポートは、as で必要に応じて、より明確な名前にエイリアスを付けることができます。

大規模な API から多くの異なるシンボルを使用する場合は、ネームスペースをインポートすることをお勧めします。