在 TypeScript 中将 JSON 文件导入为 const

Posted 2023-03-13

【中文标题】在 TypeScript 中将 JSON 文件导入为 const

【英文标题】：Import JSON file as const in TypeScript

【发布时间】：2020-06-02 11:46:40

【问题描述】：

我想从数组元素的属性中创建一个联合类型。 如果数组是内联的，那么使用常量断言将非常简单。

const arr = [ "name": "One" ,  "name": "Two" ] as const;

type name = typeof arr[number]["name"];
// name = "One" | "Two"

请注意，如果没有as const，类型name 将等于string，这不是意图。

我面临的问题是该数组是在单独的 JSON 文件中定义的。 我在 TypeScript 选项中设置了"resolveJsonModule": true，这样我就可以在我的模块中导入 JSON 文件。 但随后编译器扩大了数组中所有属性的类型，因为定义中没有as const。

import * as arr from "./array.json";

type name = typeof arr[number]["name"];
// name = string (!)

有没有一种方法可以在不扩大类型的情况下导入 JSON 文件？

【问题讨论】：

要获取第一个元素的名称属性，您应该使用arr[<idx>].name

【参考方案1】：

我也需要这个问题的答案，然后意识到，“嘿，这不会是一个很难写的 npm 包。”

我不相信有一种纯粹的 TS 方法可以做到这一点。我创建的包名为ts-json-as-const。

npm install -D ts-json-as-const
npx ts-json-as-const ./path/to/file.json ./path/to/second/file.json

示例 JSON 文件 (example.json)

  "foo": 
    "bar": false,
    "baz": true,
    "i-can": "hascheezburger"
  ,
  "array": [ 1, 2, 3,  "foo": 1, "bar": [ 4, 5 ] , 6 ]

输出example.json.d.ts

interface Example 
  foo: 
    bar: false;
    baz: true;
    'i-can': 'hascheezburger';
  ,
  array: [
    1,
    2,
    3,
    
      foo: 1;
      bar: [
        4,
        5
      ]
    ,
    6
  ]


declare const Example: Example;

export = Example;

我承认，数组间距不是很好，但是谁会查看 .d.ts 文件中的 json 文件呢？

【参考方案2】：

https://hackernoon.com/import-json-into-typescript-8d465beded79

example.json:

    "name": "testing"

javascript：

// ES6/ES2015
// app.js

import * as data from './example.json';

const word = data.name;

console.log(word); // output 'testing'

或者在 Typescript 中，同样的代码会抛出错误：

找不到模块'example.json'

[UPDATE] 解决方案：Typescript 2.9 支持 JSON 导入！

  "compilerOptions": 
    "resolveJsonModule": true,
    "esModuleInterop": true