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

Global declaration

At the end of the year, I am busy 🔥. Due to the limitation of my personal time, THE content of “statement” is temporarily divided into “global statement” and “module statement “, 👷, please bear with me and say” global “first.

What is a declaration file?

Declaration files complement type annotations to JS code. This will not prompt the JS file “missing type” in the TS compilation environment.

Declare variables Use the keyword DECLARE to indicate the type of the global variable that follows the declaration, for example:

// packages/global.d.ts
declare var __DEV__: boolean
declare var __TEST__: boolean
declare var __BROWSER__: boolean
declare var __RUNTIME_COMPILE__: boolean
declare var __COMMIT__: string
declare var __VERSION__: string
Copy the code

Those of you who have seen the vue3 source code must know that these are variables in vue. The above code indicates that variables such as __DEV__ are global and marks their types. No matter which TS file in the project uses __DEV__, the ts compiler will know that the variable is of Boolean type.

Where is the declaration file?

First declaration file filename is the requirements of the specification, must be. Which s end, saw the above code are you sure you want to practice written statement file, but you may want to ask “where is written,” said online declaration files in any path in the project/file names can be ts compiler recognition, but found in actual development, In order to avoid some strange problems, it is recommended to put in the root directory.

Declaration file written by someone else (@types/ XXX)

For example, jquery’s declaration file can be downloaded from NPM:

npm i @types/jquery
Copy the code

Jquery in NPM i@types /jquery can be changed to any js library name, of course, if someone wrote the corresponding declaration file posted to NPM.

After installation, we can see the declaration file in node_modules/@types/jquery, here I open mise. D. ts file:

How does a declaration file help a pure JS project?

Even if you only write js code, you can install the declaration file, because if you use vscode, it will automatically analyze the js code, and if a corresponding declaration file exists, vscode will use the contents of the declaration file as a code hint.

Jquery after the declaration file is installed

When should you write your own declaration?

If the declaration file is not found under “@types/” then we need to write it by hand.

🔥 How to write a declaration file?

Declaration files are divided into two categories: global declaration and module declaration. This verse just says “big picture “.

Global declarations

Declare allows us to annotate the type of a JS global variable.

Simple application

// global.d.ts
declare var n: number;
declare let s: string;
declare const o: object;
declare function f(s: string) :number;
declare enum dir {
    top,
    right,
    bottom,
    left
}
Copy the code

Once declared, we can manipulate variables directly in any file:

n = 321
s = 'words'
let o1 = o;
f('123').toFixed();
dir.bottom.toFixed();

/ / an error
n = '312'
s = 123
Copy the code

declare namespace

This namespace represents the following global variable as an object:

// global.d.ts
declare namespace MyPlugin {
    var n:number;
    var s:string;
    var f:(s:string) = >number;
}
Copy the code
MyPlugin.s.substr(0.1);
MyPlugin.n.toFixed();
MyPlugin.f('words').toFixed();

/ / an error
MyPlugin.s.toFixed();
MyPlugin.n.substr(0.1);
MyPlugin.f(123);
Copy the code

Modify an existing global declaration

When we install typescript, we are automatically given a file to declare system variables in node_modules/typescript/lib.

If you want to change the declaration of an existing global variable, you can write it like this:

declare global {
    interface String {
        hump(input: string) :string; }}// Note: modify "global declaration" must be inside the module, so at least have export{}
❌: Global scope extensions can only be nested directly in an external module or in an environment module declaration
export {}
Copy the code

There is now a hump method for String in vscode syntax, but we are only declaring it, we are not implementing it in js, so we will get an error when we run it, so don’t forget to write the js implementation.

conclusion

I am really busy at the end of the year, but I promised to update the content of TS before, so I can only complete the content of the “statement” step by step, please forgive me 👷.

Write and practice more, and soon get the hang of it. Put a few projects I write with TS as a reference, throw off a brick to attract jade, come on!

✋ mobile/PC gesture library, support: tap/press/pan/swipe/rotate/pinch

Github.com/any86/any-t…

🍭 change the vue component to a command like this.$XXX

Github.com/any86/vue-c…

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).