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

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

举例2

// my-js-module.js
function greet(name) {
  return 'Hello, ' + name;
}

module.exports = {
  greet,
};

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

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

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

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

原文地址：https://blog.csdn.net/zyf13671493506/article/details/144078229

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！