typescript - Vue JS 打字稿项目。试图减少每个组件中的模型导入，但 Vetur 抱怨

问题描述

问题

我在整个项目中有很多重用的导入，我想将其最小化以获得更简洁的代码。我在我的项目中使用类模型，并将它们导入几乎每个组件中。

到目前为止已完成故障排除

我开始使用单个文件进行测试。我在我的 main.ts 文件中导入了模型，并且在功能上它工作正常，但 Vetur 在我的 vscode 终端中抛出错误。那是怎么回事？如何消除这些错误？

301:19 Cannot find name 'ModelA'.

这是我必须在 Vetur 上查看的东西，它是这里的设置吗？

Main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import ModelA from '@/models/ModelA'

Vue.config.productionTip = false;
Vue.config.devtools = true
new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

零件

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Action Page',
  methods: {
    doSomething(): ModelA {
      //some work 
      return objectThatMatchesModelA
    }
  }
});
</script>

<style lang="stylus" scoped></style>

就像我说的那样，从功能上讲，这一切都正常工作，我可以从组件中删除导入，但问题是终端中的 vetur 错误。

ERROR 343:22 Cannot find name 'ModelA'.

我有一个垫片文件，它看起来像这样

shim-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/shims-tsx.d.ts"
  ]
}

标签： typescriptvue.jsvetur