vue3&typescript,shims-vue.d.ts中declare module的vue声明

webpack已经有了vue-loader这些loader了,为什么还需要declare module '*.vue'呢?

declare module 是为了告诉 tsc 这是一个"模块"。

如果不声明, IDE 里因为 tsc 类型检查, lint 会标红。

但vue-loader 是在 Webpack 构建阶段使用。IDE 做智能补全提示、还有 lint 时又不用到它vue-loader

之所以搞这么复杂,就是因为 tsc 只能识别 .js、.ts、.mjs、.json 等几种后缀的文件类型,并不"认识" .vue 文件。

所以后来为了更好地支持 TypeScript 类型推断,Vue3 中专门搞了一个 vue-tsc,用来取代默认的 tsc,就不需要你手动写一堆 declare module 了。

举例1

bash 复制代码
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

举例2

bash 复制代码
// my-js-module.js
function greet(name) {
  return 'Hello, ' + name;
}

module.exports = {
  greet,
};

然后你在 TypeScript 项目中引入这个模块:

bash 复制代码
// main.ts
import { greet } from 'my-js-module';

为了让 TypeScript 编译器能正确理解 my-js-module 模块的类型信息,你需要创建一个名为 my-js-module.d.ts 的类型声明文件

bash 复制代码
// my-js-module.d.ts
declare module 'my-js-module' {
  export function greet(name: string): string;
}
相关推荐
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空2 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说3 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte5 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录6 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店6 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app