0

VueJS 无法在 Typescript 中编译 DexieJS 数据库类。错误指向未能处理 Dexie.Table 类型，但 DexieJS 的插件包含类型。它说“您可能需要一个额外的加载器来处理这些加载器的结果。” 但我不确定要包含哪些处理程序以及如何包含，因为 DexieJS 的文档没有提到这一点。

更新：根据 Estus Flask 在评论中的说法，这可能是一个配置错误的 lint。如何为该项目正确配置 eslint 或修复以下特定错误

我在下面收到此错误

Failed to compile.

./src/models/CanaryDB.ts 5:10
Module parse failed: Unexpected token (5:10)
File was processed with these loaders:
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| 
| export class CanaryDB extends Dexie {
>     alerts:Dexie.Table<IAlert, number>;
| 
|     constructor() {

我的代码如下-----------

包.json

{
  "name": "canary",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "preserve"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "dexie": "^3.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

CanaryDB.ts

import Dexie from "dexie";
import Alert from "./Alert";

export class CanaryDB extends Dexie {
    alerts:Dexie.Table<Alert, String>;

    constructor() {
        super("CanaryDB");
        this.version(1).stores({
            alerts: 'acknowledged,created,created_age,created_age_seconds,' +
                'created_printable,description,dst_host,dst_port,events_count' +
                'ip_address,ippers,key,local_time,logtype,mac_address' +
                'node_id,notified,src_host,src_host_reverse,src_port,updated'
        });
        this.alerts = this.table('alerts')
    }

    async getAlerts(): Array {
        return this.alerts.orderBy('created').toArray();
    }

    async setAlerts(datas) {
        const id = await this.alerts.bulkAdd(datas);
        alert(`Added friend with id ${id}`);
    }
}

仪表板.vue

<template>
  <div id="dashboard">
    <H1>{{msg}}</H1>
    <p v-if="hasErrors" class="error">{{code + error}}</p>
    <div class="raw-data">
      <li v-for="alert in alerts" :key="alert.key">
        {{alert}}
      </li>
    </div>
  </div>
</template>

<script>
import { CanaryDB } from "@/models/CanaryDB.ts";

const axios = require("axios");

export default {
  name: "Dashboard",
  data: function() {
    return {
      hasErrors: false,
      error:"",
      code:null,
      idb: []
    };
  },
  props: {
    msg:String,
    alerts:Array
  },
  methods: {
    getApiData(){
      axios.get("https://thinkst-frontend-resources.s3-eu-west-1.amazonaws.com/incidents/data.json")
          .then( (response) => {
            let datas = response.data.alerts;
            this.idb.setAlerts(datas);
            console.log(datas[0]);
          });
    },
  },
  created() {
    this.idb = new CanaryDB();
    this.getApiData();
    this.idb.getAlerts()
  },
}
</script>

<style scoped>

</style>
4

0 回答 0