TypeScript_命名空间(namespace)
什么时候要用命名空间?
如果你发现自己写的功能(函数/类/接口等...)越来越多, 你想对他们进行分组管理就可以用命名空间, 下面先用"类"举例:
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.ts
namespace 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.ts
import {Food} from './xxx'; // 使用import导入
let meat: Food.Meat;
let fruits: Food.Fruits;
如何合并多个命名空间
我们知道接口是可以合并的, 命名空间也是可以的, 下面我们把Vegetables类型合并到Food类型中:
xxx.ts
// xxx.ts
namespace 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就可以产生模块, 模块天然就有隔离分组作用.
推荐阅读
-
C#001初始类和命名空间
-
php命名空间设计思想、用法与缺点分析
-
PHP 命名空间和自动加载原理与用法实例分析
-
PHP 命名空间原理与用法详解
-
Java Web项目前端规范(采用命名空间使js深度解耦合)
-
找不到类型或命名空间名称“Server”(是否缺少 using 指令或程序集引用?)
-
System.Web中不存在类型或命名空间名称“Optimization”(是否缺少程序集引用?)
-
System.Web中不存在类型或命名空间名称script 找不到System.Web.Extensions.dll引用
-
Python中规范定义命名空间的一些建议
-
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】