【Angular7】 json を module として扱う

はじめに

つい先日、Angular7 正式版がリリースされました 🎉
今回のアップデートは v6 ほどのインパクトはなく、主な更新内容は Angular Material のバーチャルスクロールとドラッグアンドドロップと言われていますが、Typescript の対応バージョンも 2.7.x から 3.1.x へ大きく上がっています。

Typescript は 2.8 からも様々な機能が追加されているのですが、今回はすぐに試せる json ファイルのモジュール化機能についてまとめてみます。

以前までの json ファイル読み込み

Typescript で json を読み込みたい場合、以前までであれば下記定義ファイルを作成し、json ファイルをモジュールとして無理やり解決していました。

json.d.ts

declare module "*.json" {
    const value: any;
    export default value;
}

もちろん、この定義では取得したオブジェクトが any 型になってしまうため、使用する際は結局中身を確認してフィールド名を確認しないといけません。

使用頻度・重要度が高いファイルは、ts 化していた方もいるかもしれませんね。

config.interface.ts

export interface Setting {
    repo: string;
    dry: boolean;
    debug: boolean;
}

settings.dev.json

export const DevSetting: Setting = {
    repo: "TypeScript",
    dry: false,
    debug: false
}

resolveJsonModule

しかし Typescript 3.1 に対応した Angular7 では、もうこのような手間は必要ありません。

tsconfig.json に下記設定を追加するだけで OK です。

tsconfig.json

{
    "compilerOptions": {
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

resolveJsonModule は、自分で型定義を行う必要なく json ファイルを扱うことを可能にするオプションです。
Typescript 2.9 で追加されました。

esModuleInterop については、こちらの記事 によくまとまっていたので、興味のある方は一読しておくと良いかもしれません。

---

実際に使ってみるとその威力が一目瞭然です。
ただ単に読み込めるだけではなく、json を const で定義し export したオブジェクトのように扱うことができます。
これで json から簡単・安全に値を取得できますね。

settings.json

{
    "repo": "TypeScript",
    "dry": false,
    "debug": true
}

test.ts

import settings from './settings.json';

settings.debug === true;  // OK
settings.dry === 2;  // Error: Operator '===' cannot be applied boolean and number

vscode でもしっかり補完がききます

おまけ

• Typescript 2.8 のアップデート内容
• Typescript 2.9 のアップデート内容
• Typescript 3.0 のアップデート内容
• Typescript 3.1 のアップデート内容