将 JSON 作为类型导入答案

【问题标题】：Importing JSON as a type将 JSON 作为类型导入
【发布时间】：2021-04-22 19:10:32
【问题描述】：

如何定义导入的 json 的类型？例如

{
  "things": "foo"
}

interface Data {
  things: String,
  another?: String
}

import data from './data.json' // Should have type Data
console.log(data.things)
console.log(data.another) // Should be allowed but undefined

resolveJsonModule 选项将自动为导入的 JSON 生成类型，但它不完整，因为 JSON 可能不包含数据的所有可能字段。

我如何自己定义类型？

【问题讨论】：

能否详细说明不够宽松？
您可以使用路径映射为该 JSON 指定不同的类型
@AluanHaddad 路径映射有什么帮助？
好吧，你可以创建一个像./data.json.d.ts 这样包含declare const data: Data; export default data; 的文件，然后你可以设置一个路径条目"*/data.json": ["data.json"]，它适用于像import data from "app/data.json" 这样的非相对导入。另一方面，是否需要相对，您可以跳过路径映射，只需将 data.json.d.ts 文件放在您的 data.json JSON 文件旁边

【解决方案1】：

我可以在这里想到 3 种主要方式：

const data: Data = require('./data.json')

import untypedData from './data.json'

const data: Data = untypedData

// File data.d.ts
declare module "data.json" {
  things: String,
  another?: String
}

// File tsconfig.json
{
  ...
  "typeRoots": [
    "/*path to data.d.ts*/"
  ]
}

这将让您import 以及正确输入导入的项目

【讨论】：

【解决方案2】：

如果你不介意有一个中间变量，你可以这样做：

import _data from './data.json';
const data: Data = _data;

_data 变量是编译器为其推断的任何类型，而 data 变量具有相同的值但属于您注释的类型。

【讨论】：

是的，我能做到。我真的会采用一种不需要中间变量的更简洁的方法。
我想不出任何使用import 语法的更简洁的方法。您可以使用 dynamic import 执行类似 const data2: Data = await import('./data.json'); 的操作，但有很多注意事项（速度较慢、异步、让婴儿哭泣等），我不推荐它