jsで書いたフロントを徐々にtsに移行する

はじめに

jsで書いたreact,reduxのフロントをtsに徐々に移行していくにあたって、つまづいたところをまとめました。

もうすでにある程度の規模感のjsのコードだったため、一度に全てtsに置き換えていくのは現実的ではなく、jsとtsが共存するような環境を整える際の備忘録です。

環境

webpack 4

ts-loaderは何かtsファイルがないとエラーをだす

当たり前っちゃ当たり前な気がしますが、ts-loaderを入れただけでtsファイルが一つもないと以下のエラーが出ました。
https://stackoverflow.com/questions/41211566/tsconfig-json-buildno-inputs-were-found-in-config-file

tsconfigのmodule

こんなエラーが出ました。

Uncaught ReferenceError: exports is not defined
Object.defineProperty(exports, "__esModule", { value: true });

tsconfigのmoduleが commonjs になってたのが原因でした。 es2015 に変えたらこのエラーは出なくなりました。

tsconfigのlib

TS2318: Cannot find global type 'IterableIterator'. のエラーが出ました。
ジェネレータを使う場合、tsconfigに

"downlevelIteration": true,
"lib": ["esnext"]

が必要でした。参考： https://github.com/Microsoft/TypeScript/issues/19025

TS2304: Cannot find name 'window'. のエラーが出ました。

tsconfig.jsonのlibを修正したら治りました。

"lib": ["esnext"],

↓

"lib": ["esnext", "es5", "es6", "dom"],

参考：https://stackoverflow.com/questions/41336301/typescript-cannot-find-name-window-or-document

tsとjsが共存できるようにする

tsconfig.json の allowJs をtrueにすることで ts と js が混ざっていてもOKになります。
また、allowJs をtrueにする際は declaration はfalseにしておく必要があるみたいです。

  "compilerOptions": {
    "allowJs": true,
    "declaration": false,

参考： https://github.com/Microsoft/TypeScript/issues/7546

tsにする範囲を指定する

tsconfig.json の include でts化するファイル対象を指定できます。

  "include": [
    "src/**/*"
  ]

importのパスのエイリアス設定

webpackのresolve.aliasに以下のような設定を書いてました。

  resolve: {
    alias: {
      '@config': path.join(process.cwd(), './src/config'),
      '@actions': path.join(process.cwd(), './src/js/actions'),
      '@components': path.join(process.cwd(), './src/js/components'),
      '@assets': path.join(process.cwd(), './src/assets'),
      '@utils': path.join(process.cwd(), './src/js/utils'),
      '@modules': path.join(process.cwd(), './src/js/modules'),
      '@domain': path.join(process.cwd(), './src/js/domain'),
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.styl'],
  },

tsconfig.jsonのpathにも同様の設定を書かないとなんかのエラーが出ました。(エラーは覚えてない)

    "paths": {
      "@config/*": ["src/config/*"],
      "@actions/*": ["src/js/actions/*"],
      "@components/*": ["src/js/components/*"],
      "@assets/*": ["src/assets/*"],
      "@utils/*": ["src/js/utils/*"],
      "@modules/*": ["src/js/modules/*"],
      "@domain/*": ["src/js/domain/*"],
    }

tsファイルからjsファイルをimportする

徐々にtsに移行していく場合、tsからjsをimportすることはままあると思います。
tsからjsをimportするにはjsの型定義ファイルを作成しておかないとエラーになりました。

参考:
https://stackoverflow.com/questions/54320967/nodejs-how-to-import-js-file-into-typescript
https://teratail.com/questions/31327

tslintではなく@typescript-eslint/eslint-pluginを使う

tslintはそのうち非推奨になる？っぽいので、先を見越して @typescript-eslint/eslint-plugin を入れておく。
参考：https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint