为 Vue3 学点 TypeScript, 什么是命名空间(namespace)

greatwhole 发布于2019-08-26 14:06 / 2643人阅读

摘要：往期目录第一课体验第二课基础类型和入门高级类型第三课什么是泛型第四课解读高级类型第五课什么是命名空间什么时候要用命名空间如果你发现自己写的功能函数类接口等越来越多你想对他们进行分组管理就可以用命名空间下面先用类举例仔细看你会发现下还有在这里

往期目录

第一课, 体验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种方式, 一种/// , 还有就是import:

通过 "/// " 导入

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

xxx.ts

// xxx.ts
namespace Food {
    export interface Fruits{
        taste: string;
        hardness: number;
    }
}

yyy.ts

// yyy.ts


let meat: Food.Meat;
let fruits: Food.Fruits;

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

通过import导入

如果命名空间是用export导出的, 那么使用的时候就不可以用/// 了, 要用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

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-...

服务器托管专线服务命名空间namespace js里命名空间是什么云空间是什么空间域名是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110065.html

为vue3学点typescript, 解读高级类型

摘要：直达第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型第五课什么是命名空间回顾第二课的时候为了更好的讲解基础类型所以我们讲解了一部分高级类型比如接口联合类型交叉类型本节课我会把剩余高级类型都讲完知识点摘要本节课主要关键词为自直达第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型第五课, 什么是命名空间(na...

chuyao 2019-08-26 10:28 评论0 收藏0
为vue3学点typescript(1), 体验typescript

摘要：更新啦第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型要来了看了的视频特别兴奋要来了是用开发的我揣测在的带领下会成为主流呢要不先学点年最酷的前端技术我是年初开始使用的自从开始用上了就喜欢上了真的爱不释手最爱他几点很多小错误更新啦第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型 vue3要来了看了vue ...

Batkid 2019-08-23 18:26 评论0 收藏0
为vue3学点typescript, 基础类型和入门高级类型

摘要：导航第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型很重要这一节很重要可以说是的最核心部分这一节学完其实就可以开始用写代码了想想中的再看看标题中的类型字所以请大家务必认真什么是入门高级类型因为高级类型的内容比较多但是有些基导航第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型很重要这一节很重要, 可以说...

Songlcy 2019-08-23 18:27 评论0 收藏0
为vue3学点typescript, 泛型

摘要：往期第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型插一课本来打算接着上节课把高级类型都讲完但是写着写着我发现高级类型中有很多地方都需要泛型的知识那么先插一节泛型什么是类型变量和泛型变量的概念我们都知道可以表示任意数据类型往期第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型插一课本来打算接着上节课, ...

tianlai 2019-08-23 18:41 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 七月初

摘要：七月初推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。七月不在山，不在岸，采我之时七月半。七月银潢七月秋浪高，黄昏欲渡未成桥。至今王子乔唐宋之问王子乔，爱神仙，七月七日上宾天。吸日精，长不归，遗庙今在而人非。七月初 vue2 推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。...

wuyangchun 2019-08-05 17:31 评论0 收藏0