关于javascript:TypeScript系列🔥-通过vue3实例说说declare-module语法怎么用🦕模块声明篇

欠你们的

本系列文章是我20年开始写的, 这个模块申明也是本系列的最初一课, 两头因为工夫安顿距离了1年, 过后许可大家要补充的, 当初来还债😊.

两头的工夫我写了vue3的入门教程, 当初写了一半了吧, 带视频的, 如果有须要的小伙伴能够去看看.
https://www.yuque.com/books/s… 《vue3知识点”精选”》

往期目录

第一课, 体验typescript

第二课, 根底类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

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

特别篇, 在vue3🔥源码中学会typescript🦕 – “is”

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

应用场景

npm下载的”包”自带了申明文件, 如果咱们须要对其类型申明进行扩大就能够应用”declare module“语法.

让vue3反对this.$axios

// main.ts
app.config.globalProperties.$axios = axios;

性能上咱们实现了”this.$axios”, 然而ts并不能主动推断出咱们增加了$axios字段, 所以增加如下申明文件:

// global.d.ts

import { ComponentCustomProperties } from 'vue'

// 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”的代码做了如下批改:

1. 导出减少”aaa”变量, 是string类型.
2. 类的实例减少”bbb”属性, 是number类型.

3. 类减少动态属性”ccc”, 是个函数.

   // 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肯定要导入, 因为只有导入才是类型裁减, 不导入就会变成笼罩.
   ​

测试下, 类型都曾经正确的增加:

// 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官网):

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

// App.vue
// 能够辨认vue文件
import X1 from './X1.vue';
export default defineComponent({
    components:{X1}
})

申明把vue文件当做模块, 同时标注模块的默认导出是”component”类型. 这样在vue的components字段中注册模块才能够正确辨认类型.

vuex

上面是vuex官网提供的, 在vue的实例上申明减少$store属性, 有了后面的反对, 看这个应该很轻松.

// vuex.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

// 申明要裁减@vue/runtime-core包的申明
declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

并非全部内容

到此申明的内容就都完结了, 但实际上还有些”模块申明”的形式并没有笼罩到, 因为本课程的最终目标是基于vue3开发暂不涉猎npm包的开发,所以其余的内容就不开展了, 有须要的同学能够看ts文档来学习, 有了本文的根底, 置信你会很轻松学会更多.

微信群

感激大家的浏览, 如有疑难能够加我微信, 我拉你进入微信群(因为腾讯对微信群的100人限度, 超过100人后必须由群成员拉入)

github

我集体的开源都是基于ts的, 欢送大家拜访https://github.com/any86