TypeScriptで.jsonインポート時にエラーになる問題の対応

はじめに

APIのレスポンスとして使用するデータのサンプルを用意して、仮実装を進めていきたい、ということがありました。
.tsファイルに定数を定義してもいいけど、それだとサンプルデータが大きくなった時邪魔だし、別の.tsファイルで専用の定数を定義してもよいのだが、もしもjson部分だけ取り出したい時、面倒だし、独立した.jsonにしておきたいな、と思ったので。
.jsonインポートはimportすればいいだけだし、のはずだったのですが、案外エラーに数分ハマってしまったので。同じようにハマってしまった人の助けになれば幸いです。

環境

• TypeScript v3.9.7
• Visual Studio Code v1.65.0
• MacOS v11.6.1 (Big Sur)

手順

1. importをする

import * as SAMPLE_DATA from "../sample_data/sample.json";

これで、SAMPLE_DATAという値でsample.jsonが使用できます。

この時、「'--resolvejsonmodule' を使用して '.json' 拡張子を持つモジュールをインポートすることをご検討ください。」というエラーが表示された場合は、手順2に進んでください。

2. resolveJsonModuleを追加する

tsconfig.jsonのcompilerOptionsにesolveJsonModule: trueの記述を追加してください。

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["es6", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "resolveJsonModule": true, // <-- 追加する
    },
    "exclude": ["discarded", "node_modules", "lib", "logs"]
}

ここで、まだimportのエラーが解決しない場合は、手順3へ進んでください。

3. VSCodeを再起動する

手順自体は2まででよいはずなのですが、なぜかエラーが解消しないということがあります。
私の場合はここでハマりました。

以下のissueで議論されていたのですが、なんとVSCodeの再起動で直るようです。

• Option resolveJsonModule doesn't work without esModuleInterop

VSCodeを再起動したところ、直りました。対象のプロジェクトだけcloseすれば良さそうです。

補足

esModuleInteropをtrueにする

tsconfig.jsonに、esModuleInterop: trueも定義すると、asの記述がいらないようです。（私の環境では未検証）

{
    "compilerOptions": {
        // 省略...
        "resolveJsonModule": true,
	"esModuleInterop": true // <-- これ
    },
    "exclude": ["discarded", "node_modules", "lib", "logs"]
}

import SAMPLE_DATA from "../sample-data/sample.json"

ただし、既存のプロジェクトの場合はどこか動作しなくなる可能性があるようなので、設定を変更する際は注意するようにしてください。

VSCodeじゃなくて、typescriptの再起動

先述したissue内で、「VSCodeの再起動はしなくても、typescriptの再起動だけでいけるよ！（意訳）」というコメントもありました。

出典
Adding "resolveJsonModule": true and restarting works as mentioned already, but you don't have to actually restart VSCode, you can just restart typescript itself:

最後までちゃんと読まなきゃだめですね...解決したから良いのですが...。