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;
}
相关推荐
华子w908925859几秒前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
hackchen3 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949703 小时前
Vue响应式原理推导过程
vue.js·响应式设计
pe7er4 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er4 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
蓝胖子的多啦A梦5 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
海天胜景6 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户3802258598246 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
一生躺平的仔6 小时前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript