Vue3+Vite项目中TypeScript无法识别JS默认函数问题求助

1. 确认修改的是正确的TS配置文件 #

Vite项目中，tsconfig.config.json是给Vite工具自身使用的配置文件，项目的TypeScript编译规则必须写在tsconfig.json中。如果之前仅修改了tsconfig.config.json，请将配置迁移到tsconfig.json的compilerOptions字段下。

2. 修正compilerOptions核心配置 #

调整tsconfig.json中的编译选项，确保加载必要的类型库并避免覆盖默认类型：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    // 若无需强制指定仅加载node类型，建议删除该配置，避免TS忽略DOM等默认类型
    // "types": ["node"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

• lib字段必须包含DOM：console、setTimeout等属于浏览器环境API，依赖DOM类型库提供定义。
• 避免单独指定types: ["node"]：该配置会让TS仅加载列出的类型包，导致DOM等默认类型被忽略；若确实需要node类型，可保留但需确保lib配置完整。

3. 显式指定$event类型 #

Vue3中$event无法自动推断类型，需手动指定对应类型：

• 原生DOM事件场景：

<template>
  <button @click="handleClick">测试按钮</button>
</template>

<script setup lang="ts">
// 显式指定MouseEvent类型
const handleClick = (event: MouseEvent) => {
  console.log(event.target)
}
</script>

• 自定义事件场景：

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script setup lang="ts">
// 定义自定义事件的payload类型
interface CustomEventData {
  id: number
  content: string
}
const handleCustomEvent = (event: CustomEventData) => {
  console.log(event.id)
}
</script>

4. 修复ESLint配置 #

确保ESLint正确识别浏览器环境和项目TS配置，修改.eslintrc.cjs（或对应格式的配置文件）：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    project: './tsconfig.json' // 让ESLint复用项目TS配置解析类型
  },
  rules: {
    // 自定义规则可按需添加
  }
}

• 确保env中包含browser: true：让ESLint识别console、setTimeout等浏览器全局变量。
• 若未安装相关依赖，执行命令安装：npm install @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

5. 清除缓存解决IDE标记问题 #

• WebStorm缓存：点击File -> Invalidate Caches...，选择Invalidate and Restart重启IDE。
• 项目缓存：删除node_modules、.vite、dist目录，执行npm install重新安装依赖，再运行npm run dev --force强制清除Vite缓存。

内容的提问来源于stack exchange，提问作者Sebastian Claes