Typescript - インポートを簡略化する

Question

別名でモジュールをインポートする方法はありますか？ など。私は、フォルダcommon/services/logger/logger.tsの角度サービスを持っています。 インポートを行う方法import {Logger} from "services"「サービス」にはすべてのサービスが含まれていますか？

私はthisとthisを見ましたが、私はそれをどのように使用できるか理解できませんでした。

Answer 1

この問題を解決するために、webpackを使用しました。必要なすべての依存関係をインポートする場合は、webpack configにエイリアスを追加する必要があります。たとえば、ルートにservicesというフォルダがあるフォルダsharedがあります。フォルダservicesには、必要なすべてのサービスをエクスポートするindex.tsが必要です（例：Logger）。したがってエイリアスは"services" => "shared/services"になります。

WebStormでオートコンプリート機能を使用するには、sharedというフォルダを「リソースルート」としてマークするだけです。

Answer 2

すべてのサービスを含む1つのファイルを作成し、そのファイルに名前を付けます。 services.ts。そのファイルは、すべてのサービスを格納してエクスポートするため、バレルと見ることができます。ファイルには、次のようになります。そして、あなたがServices.Logger経由であなたのserviesにアクセスし、または直接経由して、必要なサービスをインポートすることができます

import * as Services from 'common/services'; 

：

export * from './logger/logger'; 
export * from ...; 
etc. 

今、あなたは、次のように、この1つのファイルをインポートすることができます

import {Logger} from 'common/services'; 

これは単なる例であるため、パスを変更していることに注意してください。この手法の詳細については、hereをご覧ください。