typescript - Vue 3 + Vite + Typescript - 开发和构建没有发现 TS 错误

Question

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

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

App.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

From docs: 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).. So you should lean on your IDE to point out the errors in your TypeScript. Use Volar in VS Code, for instance.

引用 @tony19 comment . 这应该是正确答案。