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

1. declare module '*.vue' {
2.   import { DefineComponent } from 'vue'
3.   const component: DefineComponent<{}, {}, any>
4.   export default component
5. }

复制代码

举例2

1. // my-js-module.js
2. function greet(name) {
3.   return 'Hello, ' + name;
4. }
6. module.exports = {
7.   greet,
8. };

复制代码

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

1. // main.ts
2. import { greet } from 'my-js-module';

复制代码

为了让 TypeScript 编译器能正确明白 my-js-module 模块的范例信息，你需要创建一个名为 my-js-module.d.ts 的范例声明文件

1. // my-js-module.d.ts
2. declare module 'my-js-module' {
3.   export function greet(name: string): string;
4. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。