全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Angular
  4. 正文

TS中的模块和命名空间

2020年7月9日 448点热度 0人点赞 0条评论

一、模块

模块的的概念(官方):

关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。

“外部模块”现在则简称为“模块” 模块在其自身的作用域里执行,而不是在全局作用域里;

这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。

相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一。

我们可以把一些公共的功能单独抽离成一个文件作为一个模块。

模块里面的变量 函数 类等默认是私有的,如果我们要在外部访问模块里面的数据(变量、函数、类),

我们需要通过export暴露模块里面的数据(变量、函数、类...)。

暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数、类...)。

模块定义和使用方法

首先我们定义一个ts文件来当做我们的模块,然后把我们想要对外暴露的参数或者方法或者类通过export关键字对外暴露:

db.ts如下

var dbUrl='xxxxxx';

export function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}

export function save(){
    console.log('保存数据成功');
}

然后在需要用到的地方引入:

import { getData,save } from './modules/db';  // 引入db模块
getData();  // 调用getData方法
save();  // 调用save方法

以上的导出方法是直接在方法前面加上export关键字,我们还可以使用export进行统一导出,如下:

db.ts如下:

var dbUrl='xxxxxx';

function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}


function save(){
    console.log('保存数据成功');
}

export {dbUrl,getData,save};    // 我们直接在类的底部把我们希望对外暴露的元素统一进行export

还有一种导出叫做默认导出,默认导出在一个类里面只能有一个。通过默认导出的元素,在别的地方导入的时候,不用加大括号:

db.ts如下:

.
.
.

export default getData;

在别的地方导入:

import getData from './modules/db';    // 导入getData方法的时候不需要加大括号

getData();

 

二、命名空间

命名空间:

在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内

同Java的包、.Net的命名空间一样,TypeScript的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

命名空间和模块的区别:

命名空间:内部模块,主要用于组织代码,避免命名冲突。

模 块:ts的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。

使用示例代码:

namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}




namespace B{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }
        eat() {
            console.log(`${this.name} 在吃猫粮。`);
        }
    }  
}

// 使用
var c=new B.Cat('小花');

c.eat();

以上只是导出了命名空间里面的类和方法,接下来我们把命名空间也导出,而且在使用的地方同时导入多个命名空间:

首先定义命名空间ts文件

animal.ts如下:

export namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}

export namespace B{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃猫粮。`);
        }
    }   

}

使用的时候同时导入A、B两个命名空间:

import {A,B} from './modules/animal';

var d=new A.Dog('小黑');
d.eat();

var dog=new B.Dog('小花');
dog.eat();

 

以上就是typescript中模块和命名空间的使用方法。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 备忘
最后更新:2020年7月9日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号