TS Introduction Note 6 — Declaration files, modules, namespaces in TS

I. Declaration Documents

In enterprise development, we often separate the declarative types into a declarative file to make it easier for others to use our types or others’ types.

(1) Prepare declaration files by yourself

declare let myName:string;

declare function say(name:string, age:number) :void;
// Note: the declaration cannot be implemented

declare class Person {
    name:string;
    age:number;
    constructor(name:string, age:number);
    say():void;
}

interface Man{
    name:string
    age:number
}
Copy the code

Ts will automatically search for the type of the corresponding.d.ts file

(2) Importing other people’s declaration files

1. For the common third-party library, in fact, there has been a god to help us write the corresponding declaration file, so in the enterprise development, if we need to use some third-party JS library when we only need to install others to write the declaration file.

NPM install @types/ jQuery if you want to install @types/ jQuery

Second, the module

Because TS is a superset of JS, we can continue to use js module usage, you can choose es6 module usage, you can choose NodeJS module usage, You can also select export = and import = require() created by TS for compatibility with ES6 and Node moudle;

Note that:

In TypeScript, as in ECMAScript 2015, any file that contains a top-level import or export is treated as a module.

Conversely, if a file does not have a top-level import or export declaration, its contents are considered globally visible (and therefore visible to the module).

1. The ES6 module

(1) Import and export separately

export xxx;

export yyy;

import {xxx} from "path";
Copy the code

(2) One-time import and export

export {xxx, yyy, zzz};

import {xxx, yyy, zzz} from "path";

// Destruct the assignment
Copy the code

(3) Import and export by default

export default function (s: string) {
    return s.length === 5 && numberRegexp.test(s);
}
// The default export is nameless
Copy the code

import validate from "./StaticZipCodeValidator";
// Give default a name when introduced

let strings = ["Hello"."98052"."101"];

// Use function validate
strings.forEach(s= > {
  console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`);
});
Copy the code

(4) Import and then all export

export * from "./StringValidator"; // exports interface StringValidator
export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator
export * from "./ZipCodeValidator";  // exports class ZipCodeValidator
Copy the code

(5) Rename after import

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();
Copy the code

// Import the entire module into a variable through which to access the exported part of the module
import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();
Copy the code

2. The Node module

(1) Export through exports.xxx = XXX

Pass const XXX = require(“path”); The import

Const {xx, xx} = require(“path”); The import

Exports. module.exports. XXX = XXX

Pass const XXX = require(“path”); The import

Const {xx, xx} = require(“path”); The import

Node.js exports and module.exports

3.export = 和 import = require();

ES6 modules are incompatible with Node modules, so TS was introduced to make them compatible

export = xxx;

import xxx = require('path');
Copy the code

Namespaces

1. What is a namespace?

A namespace can be thought of as a tiny module,

Namespaces are used when we first write related business code together without wanting to pollute the global space

The essence is to define a large object, the variable/method/class/interface… Put everything in there

2. Differences between namespaces and modules

Namespaces can be used to encapsulate and prevent global contamination of code used within a program

Code that is used outside of the program itself can be encapsulated and protected from global contamination using modules

Conclusion: Since modules can do the same thing, most of the time modules are just fine

3. Use of namespaces

Definition:

namespace Validation {

    const lettersRegexp = /^[A-Za-z]+$/;

    export const LettersValidator = (value) = >{

        return lettersRegexp.test(value);

    }
	// Only things that are exported in the namespace can be used after being imported into the namespace.
}
Copy the code

Introduction:

Import using /// and reference tags

/// <reference path="./56/test.ts" />

console.log(Validation.LettersValidator('abc'));

console.log(Validation.LettersValidator(123));
Copy the code

Ts Introduction Notes Directory:

TS Introduction Note 1 – Type declarations for TS

TS Introduction Note 2 – TS interface further details

TS Introduction Note 3 — Function declarations in TS

TS Introduction Note 4 — Type Assertion for TS (Interpreted type conversions)

TS Introduction Note 5 – TS generics

TS Introduction Note 6 — Declaration files, modules, namespaces in TS

Record knowledge, transfer happiness ~

If my summary is helpful to you, please give me a thumbs up. Your encouragement is a great motivation for me to keep recording

If there are any errors in this article, please feel free to point them out in the comments