时间戳

首页 > 解决方案 > 在 typescript 中导入 json 文件导致带有有效 json 的“意外令牌”错误

json - 在 typescript 中导入 json 文件导致带有有效 json 的“意外令牌”错误

问题描述

所以我按照这篇文章尝试将一个 json 文件导入到我的代码中。这是我的导入行：

import data from './assets/fonts/helvetiker_bold.typeface.json';

这是字体 json 文件（只是为了测试它是否会立即导入）：

{"hi":"true"}

这是我的 tsconfig.json 文件：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "target": "es5",
    "module":"es2015",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declarationDir": "dist/types",
    "outDir": "dist/lib",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

这是我在尝试编译时遇到的错误：

[!] Error: Unexpected token
src\assets\fonts\helvetiker_bold.typeface.json (1:5)
1: {"hi":"true"}
        ^

我不知道它在抱怨什么..任何帮助表示赞赏

标签： jsontypescript

解决方案

我对这个问题的解决方案是创建一个包含我的 JSON 对象的类，并将它与FontLoader.parse()函数结合使用，而不是从文件中加载 JSON。这是这样完成的：

  1. 创建了一个HelvetikerUtils.ts包含我的 json 对象的文件：
export class HelvetikerUtil {
    constructor() { }

    data: any = <YOUR_FONT_JSON_HERE>
}
  1. 在任何地方导入此类

import { HelvetikerUtil } from './HelvetikerUtil';

  1. 使用 FontLoader.parse() 加载数据
let myFont = new HelvetikerUtil;
let FONTLoader = new FontLoader();
let font = FONTLoader.parse(myFont.data);

推荐阅读