Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What is going on with this article?
@pokotyan

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

More than 1 year has passed since last update.

はじめに

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

33
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pokotyan
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
33
Help us understand the problem. What is going on with this article?