【TypeScriptの基礎を学ぶ】既存JavaScriptを着実にTypeScriptへ移行する実践ガイド

JavaScriptの限界を超える！TypeScript初めの一歩　第4回

　この連載は、JavaScriptは使っているけれど、TypeScriptはまだ手を付けていない人向けのものです。あまり負担なくTypeScriptを導入して、メリットを享受することを目指します。マニアックなところには踏み込まないで、手軽にできて費用対効果が高いところを中心にあつかっていきます。第4回は「既存JavaScriptをTypeScriptに移行する方法」をテーマに、段階的な移行手順を解説します。

はじめに

　本記事では、まず既存のJavaScriptプロジェクトをTypeScriptへ移行する具体的な手順を解説します。その後、より実践的なプロジェクトに応用するための移行戦略を紹介します。

第1章 JavaScriptをTypeScriptへ移行する際の手順

TypeScriptへの移行する際に気を付ける2つのこと

　既存のJavaScriptのプロジェクトをTypeScriptに移行するには、2つのことを考えなければなりません。ひとつは自前のコードのTypeScript化で、もうひとつは外部ライブラリのTypeScript化です。

　今回の第4回は、自前のコードのTypeScript化をあつかいます。次回の第5回は、外部ライブラリのTypeScript化をあつかいます。

　自前のコードをTypeScript化する際、既存のコード全てを一度に移行するのは、膨大な時間を要し現実的ではありません。そのため、段階的な移行が推奨されます。

サンプルのプロジェクト

　今回は、簡略化した小規模のプロジェクトを例に、少しずつTypeScriptへ対応していく手順を示します。

　まずは、用意するプロジェクトを示します。Node.jsの機能や、npmのモジュールは使いません。これらを使うサンプルは、次回の第5回で示します。

　それではまずはファイル構成です。移植前のJavaScriptの状態のものです。package.jsonはnpm init -yで作ったあとに少し変更しています。

▶ファイル構成

• プロジェクトのルート/
  • my_modules/
    • hoge/
      • index.js
      • package.json
  • node_modules/
  • src/
    • index.js
    • sub.js
  • package.json

　各ファイルの内容を示します。

my_modules/hoge/index.js

export function getInfo(fromName) {
    let res = `from ${fromName}: This is "Hoge!".`;
    return res;
}

my_modules/hoge/package.json

{
  "name": "hoge",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

src/index.js

import * as sub from "./sub.js";
import * as hoge from "hoge";

function getInfo(fromName) {
    let res = `from ${fromName}: This is "Index!".`;
    return res;
}

console.log(getInfo("root"));
console.log(sub.getInfo("root"));
console.log(hoge.getInfo("root"));

src/sub.js

export function getInfo(fromName) {
    let res = `from ${fromName}: This is "Sub!".`;
    return res;
}

package.json

{
  "name": "migration",
  "version": "1.0.0",
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "hoge": "file:my_modules/hoge"
  }
}

　まず、my_module/hogeをnode_modulesにインストールします。

　プロジェクトルートのpackage.jsonのdependenciesに、"hoge": "file:my_modules/hoge"と書いてあることに注目してください。この状態で、ルートのフォルダ－でnpm installをおこなうと、node_modules/内にhogeのシンボリックリンクが作られます（Windowsの場合）。

　プロジェクトのルートでnode .コマンドを実行します。次のように結果が出力されます。

出力結果

from root: This is "Index!".
from root: This is "Sub!".
from root: This is "Hoge!".

　ここから、少しずつTypeScriptに対応していきます。