Постепенно переносите свой проект webpack на TypeScript

TL;DR

Если вы хотите перейти на TypeScript, но не хотите переносить весь свой код одновременно, вы можете настроить webpack на объединение кода TypeScript и JavaScript.

Вы можете найти демо-проект здесь.

Как?

Чтобы добавить TypeScript в проект веб-пакета, вы можете выполнить следующие шаги:

Установите необходимые dev-зависимости:

npm install --save-dev @types/jest awesome-typescript-loader typescript @types/lodash

Создайте файл tsconfig.json, чтобы указать, что вы хотите перенести на ES6:

{
  "compilerOptions": {
    "target": "es6"
  }
}

Добавьте awesome-typescript-loader в конфигурационный файл веб-пакета и загрузите свой TypeScript сначала через транспилятор TypeScript, а затем через Babel:

module: {
  rules: [
    { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader" },
    { 
      test: /\.tsx?$/, 
      exclude: /node_modules/, 
      use: ["babel-loader", "awesome-typescript-loader" }
  ]
}

Чтобы Babel не преобразовал синтаксис модуля ES6 в commonjs, вам необходимо обновить файл .babelrc:

{
  "presets": [["es2015", { "modules": false }], "react"],
  "plugins": ["transform-class-properties"]
}

Теперь наступает сложная часть: поддержание работы тестов Jest.
Необходима некоторая дополнительная настройка, чтобы указать Jest транспилировать TypeScript и запустить обычный JavaScript через Babel-Jest.

В свой package.json добавьте следующую конфигурацию Jest:

"jest": {
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
  "transform": {
    "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js",
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$"
}

Создайте файл preprocessor.js для переноса тестов TypeScript:

const tsc = require("typescript");
module.exports = {
  process(src, path) {
    if (path.endsWith(".ts") || path.endsWith(".tsx")) {
      return tsc.transpile(src, {}, path, []);
    }
    return src;
  }
};

В .babelrc вам нужно добавить отдельную конфигурацию для тестовой среды, чтобы хорошо работать с Jest:

{
  "presets": [["es2015", { "modules": false }], "react"],
  "plugins": ["transform-class-properties"],
  "env": {
    "test": {
      "presets": ["es2015", "react"],
      "plugins": ["transform-class-properties"]
    }
  }
}

Теперь у вас должна быть возможность начать перенос файлов один за другим на TypeScript, не нарушая тестов или сборок.