Enabling TypeScript (ts-loader)

Want to use TypeScript? No problem! First, enable it:

TypeScript を使いたいですか?問題ない！まず、有効にします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// webpack.config.js

  // ...
  Encore
      // ...
+     .addEntry('main', './assets/main.ts')

+     .enableTypeScriptLoader()

      // optionally enable forked type script for faster builds
      // https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
      // requires that you have a tsconfig.json file that is setup correctly.
+     //.enableForkedTypeScriptTypesChecking()
  ;

Then create an empty tsconfig.json file with the contents {} in the project root folder (or in the folder where your TypeScript files are located; e.g. assets/). In tsconfig.json you can define more options, as shown in tsconfig.json reference.

次に、空の tsconfig.json ファイルを projectroot フォルダー (または TypeScript ファイルが配置されているフォルダー。例: assets/) に {} という内容で作成します。tsconfig.json では、tsconfig.json に示すように、さらにオプションを定義できます。参照。

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

その後、アンコールを再起動します。実行すると、不足している依存関係をインストールするために実行できるコマンドが表示されます。そのコマンドを実行して Encore を再起動したら、完了です。

Any .ts files that you require will be processed correctly. You can also configure the ts-loader options via the enableTypeScriptLoader() method.

必要な .ts ファイルはすべて正しく処理されます。 enableTypeScriptLoader() メソッドを使用して ts-loader オプションを設定することもできます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// webpack.config.js
  Encore
      // ...
      .addEntry('main', './assets/main.ts')

-     .enableTypeScriptLoader()
+     .enableTypeScriptLoader(function(tsConfig) {
+         // You can use this callback function to adjust ts-loader settings
+         // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
+         // For example:
+         // tsConfig.silent = false
+     })

          // ...
  ;

See the Encore's index.js file for detailed documentation and check out the tsconfig.json reference and the Webpack guide about Typescript.

詳細なドキュメントについては、Encore の index.js ファイルを参照し、tsconfig.json リファレンスと Typescript に関する Webpack ガイドを確認してください。

If React is enabled (.enableReactPreset()), any .tsx file will also be processed by ts-loader.

React が有効になっている場合 (.enableReactPreset())、.tsx ファイルも ts-loader によって処理されます。