在打字稿中添加 JSON 文件的类型定义

Question

我的打字稿项目中有一个配置文件config.json，我想为其添加强类型。

src/config.json

{
   "id": "some-id-string",
   "data": { 
     "somekey" : "some value"
  }
}

为了添加输入，我index.d.ts还在项目中添加了一个文件：

src/index.d.ts

{
   "id": "some-id-string",
   "data": { 
     "somekey" : "some value"
  }
}

然而它似乎不起作用，因为我可以向我的 config.json 添加任意字段，并且 typescript 很乐意让它们通过，即：

src/config.json

{
   "id": "some-id-string",
   "foo": "bar", // <-- typescript doesn't catch this
   "data": { 
     "somekey" : "some value"
  }
}

我使用create-react-apptypescript 标志创建了这个项目，它生成以下内容tsconfig.json：

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

我认为我在这里错过了一些小步骤，但我不确定，而且我找不到很多如何完成此操作的示例。

编辑： 考虑到它tsconfig.json本身具有强类型，这似乎是可行的：

Answer 1

Typescript 不会验证您的 json。它仅适用于.ts和.tsx文件。

你d.ts要做的就是假设从中导入的数据config.json符合你的类型，但实际上并不能确保这一点，因为 json 文件位于 typescript 的域之外。

解决方法是将此配置放入config.ts文件中，而不是使用以下内容：

// config.ts
export default {
  //...
} as MyDataFormat

Answer 2

文件中提供的“强类型”tsconfig.json实际上根本不是 TypeScript 的作品！

相反，VSCode 使用内置的 JSONSchema 集成来提供 json 文件的类型提示。https://code.visualstudio.com/docs/languages/json

许多开源库为这些配置提供 JSON 架构，例如：webpack、eslint 等。（https://schemastore.azurewebsites.net/json/）