TypeScript - (八) TypeScript中命名空间的基本使用

简介:

个人理解：TypeScript中的命名空间其实是为功能文件做一个归类。

比方说我们所使用的的学校案例，我们的学生类，人类，学校类都可以在一个命名空间下进行定义。

一. 先来看下用命名空间的第一种写法

 

namespace MySchool {
    
    class People {
        // 姓名, 默认小明
        private name: string = '小明';
        // 年龄, 默认18
        private age: number = 18;
        // 性别, true = 男， false = 女
        private sex: boolean = true;
        // 爱好, 默认 吃，玩
        private hobby: Array<string> = ['吃', '玩'];
        
        // 类型方法声明，方法的返回值强制固定。
        getName(): string {
            return this.name;
        }
        
        getAge(): number {
            return this.age;
        }
        
        getSex(): boolean {
            return this.sex;
        }
        
        getHobby(): Array<string> {
            return this.hobby;
        }
        
        setSex(value: boolean) {
            this.sex = value;
        }
        
        setName(value: string) {
            this.name = value;
        }
        
        setAge(value: number) {
            this.age = value;
        }
        
        setHobby(value: Array<string>) {
            this.hobby = value;
        }
        
        toString(): string {
            let printString = `name:${this.name} , age:${this.age} , sex:${this.sex} , hobby:${this.hobby}`;
            return printString;
        }
        
        printInfo(): void {
            console.log(`name:${this.name}, age:${this.age}, sex:${this.sex}, hobby:${this.hobby}`);
        }
    }
    
    export class Student extends People {
        
        // 年级, 默认1
        private _grade: number = 1;
        
        // ts中的get方法。
        get grade(): number {
            return this._grade;
        }
        
        set grade(value: number) {
            this._grade = value;
        }
        
        toString(): string {
            return super.toString() + `, grade:${this.grade}`;
        }
        
        printInfo(): void {
            super.printInfo();
            console.log(`grade:${this.grade}`);
        }
        
    }
    
    export class School {
        // 学校名称，默认希望小学
        name: string = '希望小学';
        // 学校里的学生，默认空
        studentList: Array<Student> = [];
        
        // any方法声明，没有限制方法的返回值。
        printInfo() {
            console.log(`name:${this.name}, studentList:${this.studentList.toString()}`);
        }
        
    }
    
}

export default MySchool;

这种写法其实就是将三个类文件都写在一个叫 MySchool 的命名空间下，并且还是写在了一个文件中。

 测试下效果:

import MySchoolNameSpace from './MySchool';

let school = new MySchoolNameSpace.School();
let student = new MySchoolNameSpace.Student();

// School { name: '希望小学', studentList: [] }
console.log(school);
// Student { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 }
console.log(student);
school.studentList.push(student);
school.name = '杨浦区实验小学';
/**
 * School {
  name: '杨浦区实验小学',
  studentList:
   [ Student { name: '小明', age: 18, sex: true, hobby: [Array], _grade: 1 } ] }
 * */
console.log(school);

 

二. 命名空间的第二种写法(可以理解成多文件写法)。

  先看下官网给出的提示:

因为不同文件之间存在依赖关系，所以我们加入了引用标签来告诉编译器文件之间的关联。


引用标签就是: /// <reference path="NSMySchool.ts" />

注意: 一定要用三个/，这不是注释

1.声明一个命名空间文件

 

namespace NSMySchool{

}

2.声明其他命名空间内的文件

/// <reference path="NSMySchool.ts" />
namespace NSMySchool {
    export class NSPeople {
        // 姓名, 默认小明
        private name: string = '小明';
        // 年龄, 默认18
        private age: number = 18;
        // 性别, true = 男， false = 女
        private sex: boolean = true;
        // 爱好, 默认 吃，玩
        private hobby: Array<string> = ['吃', '玩'];
        
        // 类型方法声明，方法的返回值强制固定。
        getName(): string {
            return this.name;
        }
        
        getAge(): number {
            return this.age;
        }
        
        getSex(): boolean {
            return this.sex;
        }
        
        getHobby(): Array<string> {
            return this.hobby;
        }
        
        setSex(value: boolean) {
            this.sex = value;
        }
        
        setName(value: string) {
            this.name = value;
        }
        
        setAge(value: number) {
            this.age = value;
        }
        
        setHobby(value: Array<string>) {
            this.hobby = value;
        }
        
        toString(): string {
            let printString = `name:${this.name} , age:${this.age} , sex:${this.sex} , hobby:${this.hobby}`;
            return printString;
        }
        
        printInfo(): void {
            console.log(`name:${this.name}, age:${this.age}, sex:${this.sex}, hobby:${this.hobby}`);
        }
    }
}

/// <reference path="NSMySchool.ts" />
namespace NSMySchool {
    export class NSSchool {
        // 学校名称，默认希望小学
        name: string = '希望小学';
        // 学校里的学生，默认空
        studentList: Array<NSStudent> = [];
        
        // any方法声明，没有限制方法的返回值。
        printInfo() {
            console.log(`name:${this.name}, studentList:${this.studentList.toString()}`);
        }
        
    }
}

/// <reference path="NSMySchool.ts" />
namespace NSMySchool {
    export class NSStudent extends NSPeople {
        
        // 年级, 默认1
        private _grade: number = 1;
        
        // ts中的get方法。
        get grade(): number {
            return this._grade;
        }
        
        set grade(value: number) {
            this._grade = value;
        }
        
        toString(): string {
            return super.toString() + `, grade:${this.grade}`;
        }
        
        printInfo(): void {
            super.printInfo();
            console.log(`grade:${this.grade}`);
        }
        
    }
}

声明测试文件

/// <reference path="NSPeople.ts" />
/// <reference path="NSStudent.ts" />
/// <reference path="NSSchool.ts" />

let school = new NSMySchool.NSSchool();
let student = new NSMySchool.NSStudent();

// 文件引用写法:  NSSchool { name: '希望小学', studentList: [] }
console.log('文件引用写法: ', school);
// 文件引用写法:  NSStudent { name: '小明', age: 18, sex: true, hobby: [ '吃', '玩' ], _grade: 1 }
console.log('文件引用写法: ',student);
school.studentList.push(student);
school.name = '杨浦区实验小学';
/**
 文件引用写法:  NSSchool {
  name: '杨浦区实验小学',
  studentList:
   [ NSStudent { name: '小明', age: 18, sex: true, hobby: [Array], _grade: 1 } ] }
 * */
console.log('文件引用写法: ',school);

这个使用一定要注意了，光这样写完还不够。

还需要用特定的编译方式进行编译，否则是不行的。

看下官方的提示:

第一种方式，把所有的输入文件编译为一个输出文件，需要使用--outFile标记：
tsc --outFile sample.js Test.ts

 

这其实有一个坑，就是这种编译方式有可能会报错

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

说明: 访问器需要用ES5之上的编译器进行编译。

个人理解: --outFile这种编译方式不能使用我们配置的配置文件进行编译。

解决方法: tsc --outFile NSTest.js NSTest.ts -t es5

说明: 在后边加上 -t es5, 告诉ts，这个文件我们使用ts5进行编译。

 

 

 

 

总结:

1.个人认为命名空间适用于通用工具类场景。

2.个人推荐第一种写法。

附:

    系列链接: https://blog.csdn.net/qq_36255237/article/category/9168635

    GitHub的Demo地址: https://github.com/chenrui123456/TypeScript-Demo