JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい！



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。

• webpack@4.0.1
• webpack-cli@2.0.9
• webpack v3系の場合は不要
• typescript@2.7.2
• ts-loader@4.0.0

移行前の状態

極小サンプルを使って紹介する。

// src/main.js
import { add } from './module'

const result = add(1, 2)
console.log(result)

// src/module.js
export const add (x, y) => x + y

一部のコードをTypeScriptにして共存させる


src/main.jsのコードはそのままにsrc/module.jsだけTypeScriptに移行する。

// src/module.ts
export const add = (x: number, y: number): number => x + y

拡張子をjs→tsにして、型を書いただけ。


次に、JS+TSをビルドできるようにwebpackの設定を行う。

# webpackをインストール(※webpack4.0からCLIで実行するためにはwebpack-cliが必要になる)
$ npm i -D webpack webpack-cli

# TypeScriptをビルドする用
$ npm i -D typescript ts-loader

次にwebpackの設定をする。

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: {
    extensions: [".js", ".ts"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        include: __dirname
      }
    ]
  }
};

package.jsonにビルド用のスクリプトを定義する。

// package.json
{
  // 略
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  // 略
}

あとはnpm run buildを実行すればいい感じにビルドしてくれる。



以上

written by @bc_rikko