JavaScriptな世界に少しTypeScriptの恩恵をもたらす

はじめに

様々な議論・理由により、TypeScriptではなくJavaScriptでプロダクトを開発するという事はあると思う。ただ、VS Codeで開発をしている場合、TypeScriptであればinterfaceなどを定義していることで、プロパティやメソッドが補完されるというメリットを享受できるが、JavaScriptであれば補完のメリットは受けられない。

例えば、以下はexpress.jsのapp.localsに任意のプロパティを追加しているが、それが補完されない例。

そこで今回はJSDocとxxx.d.ts、jsconfig.jsonを利用して、VS Codeに対して変数の型を伝えるという事を行い、補完が機能するようにしてみたいと思う。

TypeScriptなどの静的型付け言語を利用するのは、コンパイル時（実行前）にエラーを発見できるというメリットがあり、今回取り上げる補完は付随的なメリットでしかないかもしれません。ただ、その付随的なメリットである補完さえも受けられないJavaScriptで補完されるようになることは少なからずメリットになるというスタンスです。

結論

以下のようなファイルと作成する。

jsconfig.json

{
	"include": ["src/**/*.js", "src/**/*.d.ts"]
}

src/types/express.d.ts

import { Model, ModelStatic, Sequelize } from 'sequelize';
import CustomError from '../lib/custom-error';

declare global {
	namespace Express {
		interface Locals {
			sequelize: Sequelize;
			models: {
				comment: ModelStatic<Model>;
				like: ModelStatic<Model>;
				post: ModelStatic<Model>;
				user: ModelStatic<Model>;
				vLike: ModelStatic<Model>;
			};
			CustomError: CustomError;
		}
	}
}

src/index.js

// 省略

/** @type {import("express").Application} */
const app = express();

// 省略

すると、以下のように型情報がVS Codeに伝わるため、補完が効くようになりJavaScriptで開発する際にもインターフェースやプロパティを参照して、開発の生産性と品質の向上に役立てられる。

まとめ

今回はJavaScriptの世界で、JSDocとxx.d.ts、jsconfig.jsonによって型情報をVS Codeに伝えることで、補完が効くようにする方法を試してみた。

ちなみに、今回やってみた方法は実はSvelteなどのOSSでも採用されている方法で、SvelteはJavaScriptで実装されているが、JSDocで型を定義するという方式になっており、今回やってみたJSDocでの型定義は奇抜な方法ではない（と思っている）。

参考

• TypeScript vs JSDoc という対立は存在しない、と思った話
• You might not need TypeScript... (syntax)