Vue 3 + Vite + Typescript - 开发和构建未拾取 TS 错误

Question

我正在使用 Vue 3、Vite 和 TypeScript。我想尝试使用 TypeScript 构建 Vue 项目。到目前为止，配置确实很困难。我一直在查看各种文档，但我正在努力实现我的目标。如果代码有问题，项目不应构建并抛出错误。

我附上下面的代码，我想寻求帮助。

应用程序.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    };
  },
});
</script>

包.json

{
  "name": "the-learning-resources-app---vue-js-ts",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 5001",
    "test": "jest src",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5001/ 'npx cypress open'",
    "test:e2e:ci": "start-server-and-test 'npm run build && npm run preview' http://127.0.0.1:5001/ 'npx cypress run'",
    "cypress": "cypress run",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier -w .",
    "prepare": "husky install"
  },
  "dependencies": {
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jest": "^28.1.1",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.36",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^9.7.0",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^8.0.1",
    "jest": "^26.6.3",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "start-server-and-test": "^1.14.0",
    "ts-jest": "^26.5.6",
    "typescript": "~4.7.2",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-tsc": "^0.35.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        // / to begin with.
        "src/*"
      ]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": ["vite/client", "jest", "@types/jest", "node", "cypress"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Answer 1

来自文档：Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process (you can run tsc --noEmit in the build script or install vue-tsc and run vue-tsc --noEmit to also type check your *.vue files).. 因此，您应该依靠 IDE 来指出 TypeScript 中的错误。例如，在 VS Code 中使用 Volar。

引用@tony19 评论。这应该是正确的答案。

Answer 2

对于有此问题的任何其他开发人员。对于这种情况，您可以使用vite-plugin-checker 。

安装插件

npm install --save-dev vite-plugin-checker
# or
yarn add -D vite-plugin-checker

在你的vite.config.ts中

import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    // your plugins
    checker({
      typescript: true,
    }),
  ],
  // your config
})

Answer 3

npm-run-all我通过更新脚本使用 npm 包解决了这个问题，package.json如下所示。

"vite": "vite",
"watch-tsc": "tsc --watch --noEmit"
"start": "npm-run-all --parallel watch-tsc vite"