既存プロダクトにTypeScriptを導入した話

こんにちは、スペースマーケットのフロントエンドエンジニアの荒田です。

今回は既存プロダクトにTypeScriptを導入した手順と、その学びをご紹介したいと思います。

やる前に意識したこと

flow時代の型は一旦コメントアウトする

弊社ではflowによる運用を続けてきましたが、そこまで厳密に型を定義していたわけではなく、いくつかの箇所でObject や Functionが散見されていたため、あくまで参考程度にコメントアウトしておくことにしました。

TypeScriptや導入について学ぶ

そもそも私はTypeScriptがflow-typeの親戚ぐらいの認識だったので、まず弊社と同じ技術スタックでTypeScriptを導入している記事をいくつか調査して導入手順やTypeScriptについて理解することにしました。事前調査のおかげでその後の導入がスムーズになり、TypeScriptについてもある程度学べたのでよかったです。

TypeScript導入に伴って変更（or 削除）が必要だったもの

* flow-type
* storybook
* jest
* babel

やったこと

flowの削除

TypeScriptを導入するにあたりflow及びflowに関連したモジュールを削除しました。

$ yarn remove flow flow-typed @babel/preset-flow @babel/plugin-transform-flow-strip-types eslint-plugin-flowtype

全ての.js | .jsxファイルから// @flowを削除しました。

TypeScriptの導入

$ yarn add -D typescript  

@babel/preset-typescriptを使ってTypeScriptを変換する

弊社では既にbabelを使っており、影響を最小限にするためtscでのbuildではなくbabel（@babel/preset-typescript）を選択しました。

.babelrc

{
 "presets": ["@babel/preset-react", "@babel/preset-env", "@babel/typescript"],
 ...
}

TypeScript化する際にパスの認識をしてくれなかったため、追加でmodule-resolverのaliasにパスを定義しました。

{
   "plugins":  [
     "module-resolver",
     {
       "alias": {
         "components": "./src/components",
         "config": "./src/config"
       },
       "extentions": [".ts", ".tsx"]
     },
     "typescript"
   ],
}

prettier, eslintの設定

TypeScript化するにあたってprettierとeslintが効かなくなっていたため、追加でいくつか設定をしました。

$ yarn add -D @typescript-eslint 

.eslintrc

{
 ...
 "plugins": ["@typescript-eslint"],
 ...
}

StorybookのTypeScriptサポート

StorybookのwebpackでTypeScriptを動かすためにts-loaderを導入しました。

$yarn add -D ts-loader

.storybook/webpack.config.js

module.exports = ({ config }) => {
 config.module.rules.unshift({
   test: /\.(ts|tsx)$/,
   use: ['ts-loader'],
 })
}

既存の設定だとjsxファイルしか認識しないため.tsxを正規表現に追加。

.storybook/config.js

const req = require.context('../src/', true, /.stories.jsx?$/)
↓
const req = require.context('../src/', true, /.stories.(jsx|tsx)?$/)

ts-jestの導入

jestをTypeScriptに対応するためts-jestを導入しました。

$ yarn add -D ts-jest

jest.config.js

{
 "jest": {
   "moduleFileExtensions": ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   "transform": {
     "^.+\\.ts$": "ts-jest"
   },
 }
}

導入作業は以上になります。

学んだこと

全てやりきらない。
全てのファイルを.jsxから.tsxに移行するのは現実的に時間がかかりすぎてしまいます。やるべきことのスコープを最低限開発できる状態にすることが重要だと思いました。
PRは最小単位にする。
影響範囲を最小限に抑え、レビュー及びリリースしやすいPRを作成することが大切だと実感しました。常々気をつけているつもりでしたが、開発環境のマイグレーションなどは変更差分が多く巨大PRになってしまいがちなので改めてPRの切り分けは気をつけたいと思いました。

TypeScriptの導入の知見を得られたことに加え、特に私にとって大切な学びとなったのは上記の二つでした。

最後に

スペースマーケットでは、機能開発はもちろん、技術領域に係る意思決定から仕様、運用方法の策定など積極的・主体的に関わりたいエンジニアを募集中ですので、興味がありましたら募集要項を御覧ください！

そして私の愛すべき地元、千葉県松戸市に素敵なスペースが続々と増えていることに感動＆感謝し、それらのスペースをまとめてみました。
お近くにお立ちよりの際にはぜひ利用してみてください！！

千葉県松戸市の素敵なスペース | スペースマーケット