direct

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

When do you use namespaces?

If you find yourself writing functionality (functions/classes/interfaces etc…) More and more, if you want to group them, you can use namespaces. Let’s use “classes” for example:

namespace Tools {
    const TIMEOUT = 100;

    export class Ftp {
        constructor() {
            setTimeout(() = > {
                console.log('Ftp');
            }, TIMEOUT)
        }
    }

    export class Http {
        constructor() {
            console.log('Http'); }}export function parseURL(){
        console.log('parseURL'); }}Copy the code

If you look carefully, you will find that there is also export under the namespace. Export is used here to indicate which functions are accessible externally:

Tools.TIMEOUT // Error, Tools does not have this attribute
Tools.parseURL() // 'parseURL'
Copy the code

Finally, let’s look at the code translated into JS:

"use strict";
var Tools;
(function (Tools) {
    const TIMEOUT = 100;
    class Ftp {
        constructor() {
            setTimeout(() = > {
                console.log('Ftp');
            }, TIMEOUT);
        }
    }
    Tools.Ftp = Ftp;
    class Http {
        constructor() {
            console.log('Http');
        }
    }
    Tools.Http = Http;
    function parseURL() {
        console.log('parseURL');
    }
    Tools.parseURL = parseURL;
})(Tools || (Tools = {}));
Copy the code

See JS code can be found, in JS namespace is actually a global object. If your program wants to expose a global variable, use namespace;

How do namespaces manage types?

Namespaces can be used not only for logical code, but also for types, to group types:


namespace Food {
    export type A = Window;
    export interface Fruits{
        taste: string;
        hardness: number;
    }

    export interface Meat{
        taste: string;
        heat: number; }}let meat: Food.Meat;
let fruits: Food.Fruits;
Copy the code

How do I introduce written namespaces?

//

Use “/// <reference Path =’xxx.ts’/>” to import

Importing from reference is equivalent to merging the namespace of the xxx.ts file with the current file:

xxx.ts
// xxx.ts
namespace Food {
    export interface Fruits{
        taste: string;
        hardness: number; }}Copy the code
yyy.ts
// yyy.ts
<reference path="xxx.ts" />

let meat: Food.Meat;
let fruits: Food.Fruits;
Copy the code

Now in yyy.ts we can directly use the Food type in XXX. Ts without using import.

Import through import

///


xxx.ts
// xxx.ts
// Use export to export
export interface Fruits{
    taste: string;
    hardness: number;
}

export interface Meat{
    taste: string;
    heat: number;
}
Copy the code
yyy.ts
// yyy.ts
import {Food} from './xxx'; // Use import to import
let meat: Food.Meat;
let fruits: Food.Fruits;
Copy the code

How do I merge multiple namespaces

We know that interfaces can be merged, and namespaces can be merged, so let’s merge the Vegetables type into the Food type:

xxx.ts
// xxx.ts
namespace Food {
    export interface Fruits{
        taste: string;
        hardness: number; }}Copy the code
yyy.ts
// yyy.ts
<reference path="xxx.ts" />
namespace Food {
    export interface Vegetables{
        title: string;
        heat: number; }}type Vh = Food.Vegetables['heat'] // number;
Copy the code

export=

Export = Food = export default Food if you set “module”: “umd” in tsconfig, export= Food is equivalent to export default Food, export= is common in declarations of umD-enabled plug-ins.

Use of namespaces in LoDash

In fact, if we look at some of the older plugins (JQ/Lodash) that use namespace code, we can see that it is mainly used in declaration files (xxx.d.ts) to represent exposed global variables (such as lodash’s “_”).

About declaration Documents

Declaration files (XXX.d.ts) were mentioned above to explain namespaces, but since declarations (declare) are quite extensive, I’ll go into more detail in the next section.

conclusion

In fact, if your project is directly written in TS, namespace may not be needed. After all, export can generate modules, which have the function of isolating groups naturally.

Ability is limited, if passing god see wrong place also please give advice, I will humbly accept.

Finally, I suggest you to write more and practice more. I wish you to get started with TS as soon as possible. Here are some projects I wrote with TS as a reference.

Gesture library with click/drag/rotate/zoom support: github.com/any86/any-t…

The command to generate this.$XXX for the vue component: github.com/any86/vue-c…

WeChat group

Thank you for reading, if you have any questions you can add group 🚀, there are a lot of interesting front end friends in the group, let’s learn and grow together!

You can add my wechat, and I will pull you into the wechat group (Tencent limits the number of people in the wechat group to 100, so I must pull you into the group when the number exceeds 100).