はじめに
create-next-appをしてプロジェクトを作成した時に作成される、next-env.d.tsというファイルがあります。
このファイルの中身は///の後にxmlが書かれているような内容になっており、これの意味は一体なんなんだ？と気になったので、調べてみました。
調べてみてある程度理解したつもりでいるものの、この理解であっているのか曖昧な部分もありますので詳しく知っている方がいればコメントで補足していただけると助かります！
///から始まるコメント
///から始まるコメントはTriple-Slash Directivesと呼ばれるコメントです。
このコメントはTypeScript特有のもので、ファイルの先頭にあるTriple-Slash Directivesはコンパイラへの指示として読み込まれます。
このコメントがステートメントや宣言の後に書かれていた場合はただのコメントとして解釈されるので、必ず処理を書き始める前に書く必要があります。
Triple-Slash Directiveにはいくつかの種類がありますが、今回はnext-env.d.tsに書かれている/// <reference types="hoge" />と基本の/// <reference path="hoge" />について調べていこうと思います。
/// <reference path="hoge" />
このディレクティブはファイル間の依存関係の宣言として機能します。
/// <reference path="hoge" />とかけば、hogeというpathにあるファイルをコンパイルする時に対象に含めるようにします。
普通のtsファイルであれば、export/importを使って読み込めばいいのですが、exportされていないようなファイルなどが依存関係として必要な時にこのディレクティブを使うことができます。
const log = (...args: any[]) => console.log(...args)
/// <reference path="../lib/log.ts" />
log('Hello World!')
このような関係のファイルがあった時に、tsc src/index.ts --outFile dist/test.jsというようにコンパイルしてやることで、以下のようなコンパイル結果が出力されます。
var log = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return console.log.apply(console, args);
};
/// <reference path="../lib/log.ts" />
log('Hello World!');
これによって、exportされていなかった依存ファイルをスクリプトから呼び出せるようになります。
ほとんどのライブラリがnpmで公開されていたり、TypeScriptに対応している今ではあまり必要なタイミングが想像できないですが、jQueryのようなexport/importを使って書かれていないようなライブラリをTypeScriptで利用したい場合などに使えたようです。
/// <reference types="hoge" />
このディレクティブも/// <reference path="hoge" />と同じようにパッケージの依存関係を宣言するのに役立ちます。
/// <reference types="node" />のようなディレクティブを記述すると、@types/node/index.d.tsで宣言された名前を使用することが宣言されます。
これによって、@types/node/index.d.tsがコンパイルの対象に含まれるようになるので、nodeパッケージの機能が使えるようになります。
next-env.d.tsの意味
next-env.d.tsのなかは以下のようになっています。
/// <reference types="next" />
/// <reference types="next/types/global" />
これは、/// <reference types="hoge" />のディレクティブを使っているので、nextとnext/types/globalの宣言をコードの中で使用することを宣言しています。
これらのファイルの場所を確認してみると、node_modules/next/types/index.d.tsとnode_modules/next/types/global.d.tsにあります。
これらのファイルで宣言されていることによって、Reactがグローバルで使えるようになっていたり、css modulesが使えるようになっていたりしています。
そして、next-env.d.tsファイルをtsconfig.jsonでincludeしているのでこれらの宣言がコードの中で使えるようになっているわけです。
...
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
...
まとめ
Triple-Slash Directivesは普通にTypeScriptを書いているだけであまり使うことになる機能ではないかもしれませんが、気になって調べてみることでTypeScriptに関する視野が少し開けたような気がします。
今回の記事であげた2つのディレクティブ以外にもいくつかあるので、是非調べてみてください！
最後まで読んでいただきありがとうございました！