往期目录

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

什么时候要用命名空间?

如果你发现自己写的功能(函数/类/接口等...)越来越多, 你想对他们进行分组管理就可以用命名空间, 下面先用"类"举例:

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');    }}

仔细看你会发现namespace下还有export, export在这里用来表示哪些功能是可以外部访问的:

Tools.TIMEOUT // 报错, Tools上没有这个属性Tools.parseURL() // 'parseURL'

最后我们看下编译成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 = {}));

看js代码能发现, 在js中命名空间其实就是一个全局对象. 如果你开发的程序想要暴露一个全局变量就可以用namespace;

如何用命名空间来管理类型?

命名空间不仅可以用在逻辑代码中, 也可以用在类型, 用来给类型分组:

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;

如何引入写好的命名空间?

有2种方式, 一种/// <reference path="xxx.ts" />, 还有就是import:

通过 "/// <reference path='xxx.ts'/>" 导入

通过reference进行导入相当于xxx.ts文件内的命名空间和当前文件进行了合并:

xxx.ts
// xxx.tsnamespace Food {    export interface Fruits{        taste: string;        hardness: number;    }}
yyy.ts
// yyy.ts<reference path="xxx.ts" />let meat: Food.Meat;let fruits: Food.Fruits;

现在在yyy.ts中我们就可以直接使用xxx.ts中的Food类型了, 而不需要使用import.

通过import导入

如果命名空间是用export导出的, 那么使用的时候就不可以用/// <reference/>了, 要用import导入:

xxx.ts
// xxx.ts// 使用export导出export interface Fruits{    taste: string;    hardness: number;}export interface Meat{    taste: string;    heat: number;}
yyy.ts
// yyy.tsimport {Food} from './xxx'; // 使用import导入let meat: Food.Meat;let fruits: Food.Fruits;

如何合并多个命名空间

我们知道接口是可以合并的, 命名空间也是可以的, 下面我们把Vegetables类型合并到Food类型中:

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

export=

如果你的tsconfig中设置了"module": "umd",, 那么export = Food等价于export default Food, export=常见于支持umd的插件的声明文件.

命名空间在lodash里的应用

其实我们看下那些老牌插件(jq/lodash)里使用namespace特性的代码, 可以发现主要是在声明文件中(xxx.d.ts), 用来表示暴露出来的全局变量(比如lodash的"_").

关于声明文件

上面为了解释命名空间提及了声明文件(xxx.d.ts), 但由于声明(declare)的内容很多, 所以我会在下一节详细介绍.

总结

其实如果你的项目直接是用ts写的可能用不上namespace, 毕竟export就可以产生模块, 模块天然就有隔离分组作用.

能力有限, 如果路过大神看到不对的地方还请多多指点, 我必虚心接受.

最后建议大家多写多练, 祝大家早日上手ts, 放几个我用ts写的项目当做参考, 抛砖引玉, 加油!

手势库, 支持点击/拖拽/旋转/缩放: https://github.com/any86/any-...

为vue组件生成this.$xxx的命令: https://github.com/any86/vue-...