Edited at

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.jsonallowJs をtrueにすることで ts と js が混ざっていてもOKになります。

また、allowJs をtrueにする際は declaration はfalseにしておく必要があるみたいです。

  "compilerOptions": {

"allowJs": true,
"declaration": false,

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


tsにする範囲を指定する

tsconfig.jsoninclude で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