TypeScript series 🔥, explain how to use declare module syntax through vue3 examples [🦕module declaration]

I owe you

This series of articles was written by me in 20 years. This module statement is also the last lesson of this series. There was a one-year interval in the middle because of the schedule. At that time, I promised everyone to add it, and now I will pay the debt.

In the middle time, I wrote an introductory tutorial for vue3. Now I am half of it, with a video. If you have a small partner in need, you can check it out.
https://www.yuque.com/books/share/c0ab3348-87ab-4e77-a34e-10ede7dfb00e?# "Vue3 Knowledge Point "Selected""

Previous catalog

First lesson, experience typescript

Second lesson, basic type and entry advanced type

Lesson 3, Generic

Fourth lesson, Interpreting advanced types

Lesson 5, What is a namespace?

Special, learn typescript from vue3🔥 source code🦕-"is"

Lesson 6, What is a declaration file (declare)? 🦕-Global Declaration

scenes to be used

The "package" downloaded by npm comes with its own declaration file. If we need to expand its type declaration, we can use the " declare module " syntax.

Let vue3 support this.$axios

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

Functionally, we have implemented "this.$axios", but ts cannot automatically infer that we have added the $axios field, so add the following declaration file:

// 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;
  }
}

Here expand the " ComponentCustomProperties " interface, because it is the type of the instance property in vue3.

More comprehensive example

In the above example, we expanded the interface in the original declaration, but if the export is a Class, how should we write it? Next, we expand the type of "any-touch", where the default export of "any-touch" is a Class Suppose we make the following changes to the "any-touch" code:

1. Export adds "aaa" variable, which is of string type.
2. The instance of the class adds the "bbb" attribute, which is of type number.

3. The class adds a static attribute "ccc", which is a function.

   // 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
    }
   }

   Note : AnyTouch must be imported, because only importing is the type expansion, if it is not imported, it will become an overwrite.
   ​

Under the test, the types have been added correctly:

// index.ts
import AT,{aaa} from 'any-touch';

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

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

AT.ccc = ()=>{};

Type expansion of non-ts/js file modules

ts only supports the import and export of modules, but sometimes you may need to import css/html and other files. At this time, you need to use wildcards to make ts treat them as modules. The following is the import support for ".vue" files (from vue official) :

// 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}
})

Declare that the vue file is used as a module, and at the same time mark that the default export of the module is the "component" type. In this way, the module can be correctly identified by registering the module in the components field of Vue.

vuex

The following is officially provided by vuex. Declare the addition of the $store attribute on the vue instance. With the previous support, it should be easy to see this.

// 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>
  }
}

Not all

So far the content of the statement is over, but in fact there are some "module declarations" that are not covered, because the ultimate purpose of this course is based on the development of vue3 and does not involve the development of npm packages, so the other content is not Expanded, students in need can read the ts document to learn, with the basis of this article, I believe you will easily learn more.

WeChat group

Thank you for reading. If you have any questions, you can add me to WeChat. I will pull you into the WeChat group (due to Tencent’s 100-person limit on WeChat groups, after 100 people must be pulled in by group members)

github

My personal open source is based on ts, welcome everyone to visit https://github.com/any86