Namespace (namespace) defines the identifier of the visible range, an identifier can be defined in more than one namespace, meaning in the different space discrete, the kind, in a new namespace can define any identifier, will not conflict with any existing identifier, because of the existing definitions are in other space. One of the most explicit purposes of namespaces is to solve the duplication problem.

Define and import namespaces

/// : import namespace, approximately equivalent to python import? Don’t import three slash app.ts in your project:

 namespace App {
     / / variable
     export var username:string = "Variables of App";
     / / constant
     export constNAME = "App namespace constant";/ / function
    export function func(){
        return "Func in App namespace"
    }
    / / class
    export class Human{
    age:number = 13;

    }
    console.log("hello!")
    // Of course, it is possible to execute code in the current namespace
 }
Copy the code

main.ts:

/// <reference path="App.ts" />
console.log(App.NAME);
console.log(App.Human);
var xm = new App.Human();
console.log(xm.age)
Copy the code

TSC –out main.js main.ts

The module

Basic introduction to modules

A module executes in its own scope, not in global scope, which means that variables, functions, and classes defined in a module are not visible outside the module

• Internal module

1. The statement module

   App.ts

module App{
    export var username:string = "Variables under App module";
    export const WEB_URL = 'http://www.baidu.com';
    export class Human{
        desc(){
            console.log("hello"); }}export function func(){
        console.log("hello"); }}Copy the code

2. Module calls

main.ts

/// <reference path="App.ts" />
console.log(new App.Human());
console.log(App.username);
console.log(App.WEB_URL);
Copy the code

Terminal:

tsc --out main.js main.ts
Copy the code

• An external module
  • It needs to be in a third-party framework

  Out.ts, code:

class Humen{
    uname:string;
    constructor(uname){
        this.uname = uname;
    }
    desc() {
        return 'Hello, my name isThe ${this.uname}`; }}export { Humen };
export { Humen as People };
Copy the code

Import module, main.ts, code:

import { Humen, People } from "./Out";

let obj1 = new Humen("White");
let obj2 = new People("Black");
obj1.desc();
obj2.desc();
Copy the code

Compile command:

tsc --module es6 main.ts   # --module represents specifications and standards for writing modules in code
Copy the code

Compiling configuration files (configuration for external modules)

In the root directory of a typescript-based development project, there is usually a file called tsconfig. This is the typescript compilation configuration file.

Configuration options: www.tslang.cn/docs/handbo…

Tsconfig. json, common configuration items, code:

// The current configuration file name must be tsconfig.json
// Also, there are no comments in json files, so the comments here are for learning purposes only, and should not be used in development
{
    "compilerOptions": {
        "module": "system".// Write the module specification standard in the project
        "noImplicitAny": true.An implied any type on an expression or declaration is an error
        "removeComments": true.// Remove all comments, except for those starting with /! * Copyright information at the beginning.
        "preserveConstEnums": true.// Keep const and Enums declarations
        "outDir": "script".// Compile results to save directory
        // "outFile": ".. /.. /built/local/tsc.js", // built/local/tsc.js", // Built /local/tsc.js
        "sourceMap": true.// Generate the corresponding.map file
        "experimentalDecorators": true.// Enable experimental ES decorator
        "lib": [ // A list of library files that need to be imported during compilation
            "es5"."dom"."es2015.promise"]},"files": [   // Specify a list of files to compile, conflicting with include and exclude. Exclude is generally used in development
      "main.ts"
    ]
  // "include": [// specify the directory where the file to be compiled resides
//// "src/**/*",
/ / ". /"
/ /,
// "exclude": [// exclude file directories at compile time
// "node_modules",
// "**/*.spec.ts"
/ /]
}
Copy the code