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

TypeScriptでJSONファイルを型付きで読み込む

More than 1 year has passed since last update.

こんな感じのjsonファイルを読み込みたい。

dummy.json
{
  "foo": "foo",
  "bar": 123
}

自動で型定義

typescript@^2.9.1(2018.5.31~)からはtsconfig.jsonresolveJsonModulemoduleResolutionを設定すれば型の付いたJSONを直接インポートできるようになりました。

tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}
import dummy from './dummy.json'

console.log(dummy.foo); 

自分で型定義

型を付けるための*.d.tsを作ります。名前はtypes/json/index.d.tsにしました。(なんでもいい)
そして中身はこんな感じにします。

types/json/index.d.ts
declare module '*/test-data.json' {
  interface TestData {
    foo: string;
    bar: number;
  }

  const value: TestData;
  export = value;
}

*/data-test.jsonとしてるのは./data-test.json../data-test.jsonみたいなimportにもマッチさせるためです。

後は、これを読み込むだけ。

import dataTest = require('./data-test.json');

別にanyで構わないならvalue: Fooとしてる部分をvalue: anyにすればOKです。

nju33
① JavaScript (TypeScript) ② Bash ③ Rust な感じでやってます。最近はブログの方がメインです。
https://nju33.com
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