TypeScript：將 JSON 轉換為某種類型的數組

Question

我在這里閱讀了很多帖子，但我仍然無法使其正常工作。 誰能指出我做錯了什么？

我正在使用 TypeScript 3.7.5 (tsconfig)

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

我有一個JSON文件：

{
  "result" : [ {
    "line" : 1,
    "dateTime" : "2020-01-15T00:00:06.338",
    "thread" : "main",
    "logLevel" : "INFO",
    "description" : "by (com.xxx.xxx.batch.consumer.EventConsumer:280)  sleep Consumer PAY_REQ_CONSUMER - Waiting for a message ... [main]"
  }, {
    "line" : 2,
    "dateTime" : "2020-01-15T00:00:13.350",
    "thread" : "main",
    "logLevel" : "INFO",
    "description" : "by (com.xxx.xx.batch.consumer.EventConsumer:280)  sleep Consumer PAY_REQ_CONSUMER - Waiting for a message ... [main]"
  }, {...

我想用我自己的對象映射此文件中包含的每個對象： LogLine

export default class LogLine {

    constructor(public line: number,
    public dateTime: Date,
    public thread: String,
    public logLevel: String,
    public description: String) { }

}

我有一個用於導入數據的類：

import LogLine from './log-line';

export default class JsonImporter {
    constructor() { }

    import() {

        const fileContent = require('../src/LogsFilesStore/scf-finance-consumer1.json');
        const xx = JSON.parse(fileContent);
        console.log(xx[0]);
        return fileContent;
    }

}

這是我在控制台中看到的：

{ result:
   [ { line: 1,
       dateTime: '2020-01-15T00:00:06.338',
       thread: 'main',
       logLevel: 'INFO',
       description:
        'by (com.xxx.xx.batch.consumer.EventConsumer:280)  sleep Consumer PAY_REQ_CONSUMER - Waiting for a message ... [main]' },
     { line: 2,
       dateTime: '2020-01-15T00:00:13.350',
       thread: 'main',
       logLevel: 'INFO',
       description:
        'by (com.xxx.xx.batch.consumer.EventConsumer:280)  sleep Consumer PAY_REQ_CONSUMER - Waiting for a message ... [main]' },
     ...

我已經嘗試了很多方法來將所有這些映射到 LogLine[] 數組，但是如果我嘗試執行這樣的操作，我總是會收到錯誤消息： const fileContent: LogLine[] = data.result;

例如 ：

“結果不是 {} 的屬性”

更多關於錯誤的元素：

> typescript-log-charter@1.0.0 import C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter
> ts-node src/launch.ts


C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter\src\import-datas.ts:9
                const xx = JSON.parse(fileContent);
                  ^
SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at JsonImporter.import (C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter\src\import-datas.ts:9:19)
    at Object.<anonymous> (C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter\src\launch.ts:4:28)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Module.m._compile (C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter\node_modules\ts-node\src\index.ts:400:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Users\Loveg\Workspaces\MyEclipse CI\LogCharter\node_modules\ts-node\src\index.ts:403:12)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

提前感謝。

Answer 1

你需要先解析你的json。 嘗試這樣的事情：

export default class JsonImporter {
    constructor() { }

    import() {
        const fileContent = JSON.parse(data);
        return fileContent.result.map(c => new LogLine(c.line, c.dateTime, c.thread, c.logLevel, c.description));
    }
}

當你在一個 json 對象上調用 console.log 時，它會去掉最外面的 \\"\\" 所以它看起來像是一個對象，但它基本上是一個字符串，所以你需要先解析它才能工作。