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

Question

我有一个使用 NextJS, React, GraphQL and 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 可以识别这些数据的形状。

如何从这些数据中创建类型？

Answer 1

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

type ApplicationData = typeof applicationsData[0]

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

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

How do I use the type of imported JSON file in TypeScript

typescript

reactjs

graphql

next.js