目次
きっかけ
少し前に作成したNuxtプロジェクトは、Javascriptベースで静的な型定義を気にせず書いているものが幾つかあったのですが、弊社内では、JavascriptベースからTypescriptベースで開発を行うように移行を行っています。何度か移行を行う中で得た知見をまとめます。
Typescriptとは
マイクロソフトが開発したオープンソース言語です。”型定義ができるjavascript”と呼ばれることが多いです。また、Typescriptは、Javascriptの仕様を拡張した仕様となっているので、JavascriptはTypescriptとしても有効です。
JavascriptからTypescriptへ移行する
大きく分けると下記のステップで実行します。
- プロジェクトにTSCを追加する
- 既存のJavascriptコードの型をチェック、修正する。
- サードパーティ関連の型を対応する
TSCを追加する
TSCは、Typescriptのコンパイラーです。まずはこれを利用できるようにします。下記コマンドを実行することでnuxtプロジェクトへ追加できます。以下に実際に作業を行ったときの手順を示します。
コンパイラーのインストールをする
yarn add --dev @nuxt/typescript-build設定を追加する
/* nuxt.config.js */
export default {
buildModules: ['@nuxt/typescript-build']
}Javacriptの型チェックを有効にする
tscconfig.jsに設定を追加します。
{
...
"esModuleInterop": true,
"allowJs": true,
"checkJs": true,
...
} これでjavascriptも型チェックが走るのですが、巨大なプロジェクトだと大量にエラーが出力されます。これだとエラーを確認するのが大変なので、ファイルごとにチェックをするしないという設定ができる「// @ts-check」を記載して1ファイルずつ潰して行くのが良いと思います。
これで、問題をすべて潰したらファイルの拡張子を「js」から「ts」へ変更します。
サードパーティJavascriptの型チェックを対応する
サードパーティJavascriptでは、型が公開されているものとそうでないものがあります。それぞれの対応方法について、まとめます。
型定義が公開されている場合
Definitely Typed(https://github.com/DefinitelyTyped/DefinitelyTyped)と呼ばれるオープンソースプロジェクト用のアンビエントモジュール宣言がありますので、こちらから引っ張るのが早いです。hogehogeモジュールのtypesは、下記のようにインストールができます。もし、これで見つからない場合は、次の方法を実行します。
# hogehogeをインストールする
$ yarn add --dev @types/hogehoge型定義が公開されていない場合
対応方法としては、4パターンあります。
パターン1.最も楽、最も安全でないパターン
Typescriptを使わないようにする方法です。下記のように「@ts-ignore」を利用して無効にしまい、このモジュールのすべての利用箇所をホワイトリスト化することです。
// @ts-ignore
import home from HogeHoge
...
function Hoge() {
・・・
}パターン2.楽、安全でないパターン
空の型宣言ファイルを作成し、モジュールに対する型チェックをもみ消すことで、このモジュールのすべての利用箇所をホワイトリスト化することです。
// example types.d.ts
// hogehogeモジュールの型を宣言する
declare module 'hogehoge'パターン3.少し大変、安全パターン
パターン2と同様にファイルを作成して、その中で参照する型宣言を記載します。
これにより、importする際の型が「any」型ではなくなるので、より安全になります。
// example types.d.ts
// hogehogeモジュールの型を宣言する
declare module 'hogehoge' {
export function create( item : string): Promise<number>;
}利用箇所では、createは、any型ではなくtypes.d.tsで定義した型であることがチェックされます。
パターン4. 大変、安全パターン
利用頻度に応じて、型定義自体を公開してしまうという方法です。
- npmパッケージとして公開してもらう(Gitリポジトリにプルリクする)
- DefinitelyTypedにコントリビュートする
まとめ
既存のjavascriptプロジェクトにもTypescriptは簡単に導入することができます。 まずは、導入してみて時間を見つけて古いJavascript部分もTypescriptへ置き換えし、ストレスフリーなコーディングをしましょう!
