在typescript中为JSON文件添加类型定义

piok6c0g 于 2023-10-21 发布在 TypeScript

关注(0)|答案(3)|浏览(124)

我有一个配置文件config.json，它位于我的typescript项目中，我想为其添加强类型。

src/config.json

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

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

src/index.d.ts

declare module 'config.json' {
  export const id: string;
  export const data: Record<string, string>;
}

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

src/config.json

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

我使用带有typescript标志的create-react-app创建了这个项目，它产生了以下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本身具有强类型：

JSON

来源：https://stackoverflow.com/questions/61781847/adding-a-type-definition-for-a-json-file-in-typescript

3条答案

按热度按时间

uxhixvfz1#

tsconfig.json文件中提供的“强类型”实际上根本不是TypeScript的工作！
相反，VSCode使用内置的JSONSchema集成来为json文件提供类型提示。https://code.visualstudio.com/docs/languages/json
许多开源库都为它们提供了JSON模式，例如：webpack、eslint等。（https://schemastore.azurewebsites.net/json/）

赞(0）回复(0）举报 2023-10-21

ktca8awb2#

Typescript不会验证你的json。它只适用于.ts和.tsx文件。
你的d.ts会做的是假设从config.json导入的数据符合你的类型，但它实际上不会确保这一点，因为json文件在typescript的域之外。
解决方法是将此配置放在config.ts文件中，而不是像这样：

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

赞(0）回复(0）举报 2023-10-21

w41d8nur3#

我解决了一个类似的问题，没有使用普通的json文件作为配置，而是通过动态导入一个config module：
script_with_config.ts：

type MyConfig = {
  someConfigValue: string;
};

type ConfigModule = {
  [configName: string]: MyConfig;
};

export default MyConfig;

const configFile = "myConfigFile.ts";
import(configFile).then((loadedConfigs: ConfigModule) => {
  const config: MyConfig | undefined = loadedConfigs["default"];
  console.log(config?.someConfigValue);
});

然后在我的配置文件中使用导出的配置类型
myConfigFile.ts:

import MyConfig from "./script_with_config";

export const someConfig: MyConfig = {
  someConfigValue: "foo",
};

export default someConfig;

export const someOtherConfig: MyConfig = {
  someConfigValue: "bar",
};

请注意，配置不仅适用于loadedConfigs["default"]，也适用于loadedConfigs["someConfig"]（因为它也是通过这种方式导出的）。因此，您可以在一个文件中导出多个bar，就像在本例中，您可以使用loadedConfigs["someOtherConfig"]访问其他配置，它会将“bar”记录到控制台。
当然，您必须同时编译配置文件，或者（像我一样）使用ts-node来执行脚本。

赞(0）回复(0）举报 2023-10-21

我来回答

在typescript中为JSON文件添加类型定义

3条答案

相关问题

热门标签

最新问答