Owe you

This series article is I 20 years began to write, this module statement is also the last lesson of this series, the middle because of the time interval of 1 year, at that time promised everyone to supplement, now to pay off the debt 😊.

In the middle of the time I wrote vue3 introductory tutorial, now write half, with video, if a friend in need can go to look at. www.yuque.com/books/share… “Selected Knowledge points” of VUE3

Past directory

Lesson one: Play with typescript

Lesson two, basic types and introductory advanced types

Lesson three: Generics

Lesson four: Reading advanced types

Lesson 5: What is a namespace

Special, learn typescript in vue3🔥 source 🦕 – “is”

Lesson 6. What is a declare? 🦕 – Global declaration

Usage scenarios

The “package” downloaded by NPM comes with a declaration file. If we need to extend its type declaration, we can use the “Declare Module” syntax.

Let vue3 support this.$axios

// main.ts
app.config.globalProperties.$axios = axios;
Copy the code

Functionally we implement “this. axios”, but ts does not automatically infer that we added axios”, so we add the following declaration file:

// global.d.ts

import { ComponentCustomProperties } from 'vue'

// The instance type of axios
import { AxiosInstance } from 'axios'

// Declare the extension to @vue/ run-time core package.
/ / expansion "ComponentCustomProperties" interface here, because he is the instance of vue3 attribute type.
declare module '@vue/runtime-core' {
  
  // Provide the type for 'this.$HTTP'
  interface ComponentCustomProperties {
    $axios: AxiosInstance; }}Copy the code

Expansion of “ComponentCustomProperties” interface here, because he is in vue3 instance of the type of the property.

A more comprehensive example

In the example above we extend the interface in the original declaration, but what if the export is a Class? The default export for “any-touch” is a Class. Suppose we make the following changes to the “any-touch” code:

  1. Export adds “AAA” variable, which is string.
  2. Class instance adds the “BBB” attribute, which is of type number.
  3. Class adds the static attribute “CCC “, which is a function.
// global.d.ts

// AnyTouch must import, because only import is an extension, not import will become an overwrite.
import AnyTouch from 'any-touch'

declare module 'any-touch' {
    // Export adds the "aaa" variable, which is a string.
    export const aaa: string;
		
    export default class {
      // Class adds a static attribute "CCC ", which is a function.
      static ccc:() = >void
      // Add a "BBB" attribute to an instance of the class, which is type number.
      bbb: number}}Copy the code

Note: AnyTouch must import, because only an import is a type extension, otherwise it becomes an overwrite.

Under 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 = () = >{};
Copy the code

Type extension for non-TS/JS file modules

Ts only supports importing and exporting modules, but sometimes you may need to import CSS/HTML files. In this case, you need to use wildcards to make TS regard them as modules. Here is the import support for “.

// global.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
Copy the code
// App.vue
// Can recognize vue files
import X1 from './X1.vue';
export default defineComponent({
	components:{X1}
})
Copy the code

Declare the vue file as a module and note that the default export of the module is of type “Component”. This allows the registration module to correctly identify the type in the Components field of the Vue.

vuex

$store = $store = $store = $store = $store = $store = $store = $store

// vuex.d.ts

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

// Declare the extension to @vue/ run-time core package
declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

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

Not the whole story

This is the end of the declaration, but there are still some “module declaration” ways are not covered, because the ultimate goal of this course is vue3 based development does not involve NPM package development, so the rest of the content will not be expanded, if you need to see the TS documentation to learn, with the basis of this article, I’m sure you’ll learn more easily.

WeChat group

Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).

github

My own open source is based on TS, please visit github.com/any86