如何在 TypeScript 中使用导入的 JSON 文件的类型答案

【问题标题】：How do I use the type of imported JSON file in TypeScript如何在 TypeScript 中使用导入的 JSON 文件的类型
【发布时间】：2021-12-19 12:58:31
【问题描述】：

我有一个使用NextJS、React、GraphQL 和TypeScript 构建的项目。在这个项目中，我有一些静态 JSON 数据存储在../data/applications.json：

[
    {
        "id": "elector-v3",
        "name": "Tesla Auto Pilot Elector API",
        "apiName": "tap-api-v3-elector",
        "apiPath": "/tap/v3/elector"
    },
    {
        "id": "clairvoyance-v2",
        "name": "Tesla Auto Pilot Clairvoyance API",
        "apiName": "tap-api-v2-clairvoyance",
        "apiPath": "/tap/v2/clairvoyance"
    },
    ... and many more...
]

使用 NextJS 和 TypeScript，我可以直接在我的 TS 文件中导入这些数据：

import applicationsData from "../data/applications.json"

我注意到在处理这些数据时，TypeScript 可以识别这些数据的形状。

如何根据这些数据创建类型？

【问题讨论】：

标签： reactjs typescript graphql next.js

【解决方案1】：

假设数组中的每个对象都具有相同的四个属性，那么typeof applicationsData[0] 将为您提供适当的类型。然后，您可以使用 Type Alias 为该类型创建一个正确的名称：

type ApplicationData = typeof applicationsData[0]

请记住：使用推断类型将适用于像这样的基本用例，在这些用例中，您可以控制数据并且其结构是稳定的。您基本上将第一个元素用作数组中所有数据的“样本”。对于结构更不稳定的情况，最好手动定义自己的类型定义。

【讨论】：