LoginSignup
37

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-04-10

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37