json - 在 TypeScript 中导入 JSON 文件

Question

我有一个 JSON 文件，如下所示:

{

  "primaryBright":    "#2DC6FB",
  "primaryMain":      "#05B4F0",
  "primaryDarker":    "#04A1D7",
  "primaryDarkest":   "#048FBE",

  "secondaryBright":  "#4CD2C0",
  "secondaryMain":    "#00BFA5",
  "secondaryDarker":  "#009884",
  "secondaryDarkest": "#007F6E",

  "tertiaryMain":     "#FA555A",
  "tertiaryDarker":   "#F93C42",
  "tertiaryDarkest":  "#F9232A",

  "darkGrey":         "#333333",
  "lightGrey":        "#777777"
}

我正在尝试将其导入到 .tsx 文件中。为此，我将其添加到类型定义中:

declare module "*.json" {
  const value: any;
  export default value;
}

我正在像这样导入它。

import colors = require('../colors.json')

在文件中，我使用颜色 primaryMain 作为 colors.primaryMain。但是我得到一个错误:

Property 'primaryMain' does not exist on type 'typeof "*.json"

Answer 1

使用 TypeScript 2.9.+，您可以通过执行以下操作轻松导入具有类型安全和智能感知等优点的 JSON 文件:

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

确保在 tsconfig.json (documentation) 的 compilerOptions 部分添加这些设置:

"resolveJsonModule": true,
"esModuleInterop": true,

旁注:

• Typescript 2.9.0 有这个 JSON 功能的错误，它已在 2.9.2 中修复
• esModuleInterop 只有在默认导入 colorsJson 时才需要。如果将其设置为 false，则必须使用 import * as colorsJson from '../colors.json'
将其导入