Подключение TypeScript (ts-loader)

Дата обновления перевода: 2022-01-19

Подключение TypeScript (ts-loader)

Вы хотите использовать 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()

      // по желанию подключите ответвленный type script для более быстрого построения
      // https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
      // требует, чтобы у вас был файл tsconfig.json, который настроен правильно.
+     //.enableForkedTypeScriptTypesChecking()
  ;
    

Затем, создайте пустой файл tsconfig.json с содержанием {} в корневой папке проекта (или в папке, где находятся ваши файлы TypeScript; например, assets/). В tsconfig.json вы можете определить больше опций, как показано в справочнике tsconfig.json.

Затем перезапустите Encore. Когда вы сделаете это, он даст вам команду, которую вы можете выполнить для установки любых отсутствующих зависимостей. После выполнения этой команды и перезагрузки Encore, вы закончили!

Любой файл .ts, который будет вам нужен, будет обработан правильно. Вы можете также сконфигурировать ts-loader options через метод enableTypeScriptLoader():

        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) {
+         // Вы можете использовать функцию обратного вызова, чтобы откорректировать настройки ts-loader
+         // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
+         // Например:
+         // tsConfig.silent = false
+     })

          // ...
  ;
    

Смотрите файл Encore's index.js, чтобы увидеть детальную документацию и почитать справочник tsconfig.json и руководство Webpack о Typescript.

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