Підключення TypeScript (ts-loader)

Дата оновлення перекладу 2022-05-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.