Help us understand the problem. What is going on with this article?

【Angular7】 json を module として扱う

More than 1 year has passed since last update.

はじめに

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

https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

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 でもしっかり補完がききます

スクリーンショット 2018-10-25 17.20.22.png

おまけ

MasanobuAkiba
フロントエンドが好きです 現在は angular と firebase 中心の生活 かつて麻雀廃人だった名残で、アカギ アイコン にしてます (。・ω・。)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした