为什么 Vue.js3 `npm run build` 会给出一堆错误： TS2304 “Cannot find name ‘foo’’” & TS2532“对象可能是‘未定义’”？

Question

我使用 TypeScript 完成了一个 Vue.js3 项目。我用 Vue 做的最后一个项目是 Vue.js2，我有一个更简单的设置，没有 vue-tsc。

看来，如果我运行默认的 npm run build 命令，就会调用 vue-tsc --noEmit && vite build，我收到 53 个错误（各种文件中都有多个错误）。

这些错误在开发编译期间永远不会出现，并且在 VS 代码中看不到任何突出显示的问题。在尝试构建之后，我只看到大量错误（可能与我的 Typescript 设置有关？）。

我可以通过从命令中删除 vue-tsc --noEmit 并仅使用：vite build 来解决这个问题。但是，想知道我是否遗漏了任何内容或给我的项目带来任何潜在问题？

代码片段如下：

Vue 应用程序中的 build 配置 package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

例如，

当我使用 vue-tsc 构建时看到的错误（显示 2）

44         v-model="user.password"
                    ~~~~

src/components/Register.vue:44:18 - error TS2304: Cannot find name 'user'.

44         v-model="user.firstName"
                    ~~~~

src/components/Login.vue:48:25 - error TS2532: Object is possibly 'undefined'.
...
...53 more :(

Register.vue 组件（上面错误标记的组件示例）

注意：同样，这里的 dev 编译没有错误。

<script lang="ts">
import RegisterButton from "./buttons/RegisterButton.vue";
import ValidationErrors from "./ValidationErrors.vue";
export default {
  name: "RegisterUser",
  components: {
    RegisterButton,
    ValidationErrors,
  },
  data() {
    return {
      user: {
        firstName: "",
        lastName: "",
        email: "",
        password: "",
      },
      errors: {},
    };
  },
  methods: {
    onValidationError(errors: Record<string, unknown>) {
      let err = {};
      for (const key in errors) {
        const message = errors[key]["message"];
        err[key] = message;
      }
      this.errors = err;
    },
  },
};
</script>

<template>
  <div class="container-sm mt-3">
    <h1 class="mb-4">Register a New User</h1>
    <ValidationErrors :errors="errors" />
    <!-- Registration Form -->
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="First Name"
        v-model="user.firstName"
      />
    </div>
    <div class="mb-3">
      <input
        type="text"
        class="form-control form-control-lg"
        placeholder="Last Name"
        v-model="user.lastName"
      />
    </div>
    <div class="mb-3">
      <input
        type="email"
        class="form-control form-control-lg"
        placeholder="Email"
        v-model="user.email"
      />
    </div>
    <div class="mb-3">
      <input
        type="password"
        class="form-control form-control-lg"
        placeholder="Password"
        v-model="user.password"
      />
    </div>
    <RegisterButton :user="this.user" @validationError="onValidationError" />
  </div>
</template>

tsconfig.json 设置

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@": ["src/*"],
      "store/*": ["src/store/*"]
    },
    "module": "es2022",
    "moduleResolution": "Node",
  }
}

有人知道我可能缺少什么吗？我的 tsconfig.json 中可能存在错误或缺失的内容吗？

Tl;DR

运行构建命令为 vue-tsc --noEmit && vite build 抛出一堆在开发编译期间不存在的错误。如果我仅通过 vite build 构建，事情就可以了。但是，我是 vue-tsc 的新手，想知道我的设置是否不正确，或者是否缺少某些内容。

Answer 1

我也发现了同样的问题，通过将vue-tsc版本升级到0.40.13（最新版本）解决了

Answer 2

从 package.json 的构建行中删除 vue-tsc --noEmit 后，它必须起作用。

"build": "vue-tsc --noEmit && vite build",

一定

"build": "vite build",

适合我的情况我也有一个配置文件，所以：

"build": "vite build --config vite-app.config.ts"