TypeScript系列, 通过vue3实例说说declare module语法怎么用[模块声明篇]

最新推荐文章于 2024-08-17 15:07:19 发布

铁皮饭盒

最新推荐文章于 2024-08-17 15:07:19 发布

阅读量3.6k

点赞数 1

文章标签： typescript javascript 前端 vue.js 开发语言

本文链接：https://blog.csdn.net/n6308/article/details/128617460

版权

欠你们的

本系列文章是我20年开始写的, 这个模块声明也是本系列的最后一课, 中间因为时间安排间隔了1年, 当时答应大家要补充的, 现在来还债😊.

中间的时间我写了vue3的入门教程, 现在写了一半了吧, 带视频的, 如果有需要的小伙伴可以去看看. https://www.yuque.com/books/share/c0ab3348-87ab-4e77-a34e-10ede7dfb00e?# 《vue3知识点"精选"》

往期目录

第五课, 命名空间(namespace)是什么

特别篇, 在vue3🔥源码中学会typescript🦕 - "is"

第六课, 什么是声明文件(declare)? 🦕 - 全局声明篇

第七课, 通过vue3实例说说declare module语法怎么用🦕模块声明篇

新开发vscode插件: ⚡any-type, 一键json到ts类型

使用场景

npm下载的"包"自带了声明文件, 如果我们需要对其类型声明进行扩展就可以使用"declare module"语法.

让vue3支持this.$axios

typescript // main.ts app.config.globalProperties.$axios = axios; 功能上我们实现了"this.$axios", 但是ts并不能自动推断出我们添加了$axios字段, 所以添加如下声明文件: ```typescript // global.d.ts

// axios的实例类型 import { AxiosInstance } from 'axios'

// 声明要扩充@vue/runtime-core包的声明. // 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型. declare module '@vue/runtime-core' {

// 给this.$http提供类型 interface ComponentCustomProperties { $axios: AxiosInstance; } } ``` 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.

更全面的例子

上面的例子中我们扩充了原声明中的interface, 但是如果导出是一个Class我们该如何写呢? 下面我们对"any-touch"的类型进行扩充, 这里"any-touch"的默认导出是一个Class. 假设我们对"any-touch"的代码做了如下修改:

导出增加"aaa"变量, 是string类型.
类的实例增加"bbb"属性, 是number类型.
类增加静态属性"ccc", 是个函数. ```typescript // global.d.ts

// AnyTouch一定要导入, 因为只有导入才是扩充, 不导入就会变成覆盖. import AnyTouch from 'any-touch'

declare module 'any-touch' { // 导出增加"aaa"变量, 是个字符串. export const aaa: string;

export default class {
  // 类增加静态属性"ccc", 是个函数.
  static ccc:()=>void
  // 类的实例增加"bbb"属性, 是number类型.
  bbb: number
}

} ``` 注意: AnyTouch一定要导入, 因为只有导入才是类型扩充, 不导入就会变成覆盖.

测试下, 类型都已经正确的添加: ```typescript // index.ts import AT,{aaa} from 'any-touch';

const s = aaa.substr(0,1);

const at = new AT(); at.bbb = 123;

AT.ccc = ()=>{}; ```

对非ts/js文件模块进行类型扩充

ts只支持模块的导入导出, 但是有些时候你可能需要引入css/html等文件, 这时候就需要用通配符让ts把他们当做模块, 下面是对".vue"文件的导入支持(来自vue官方): typescript // global.d.ts declare module '*.vue' { import { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } typescript // App.vue // 可以识别vue文件 import X1 from './X1.vue'; export default defineComponent({ components:{X1} }) 声明把vue文件当做模块, 同时标注模块的默认导出是"component"类型. 这样在vue的components字段中注册模块才可以正确识别类型.