一、模块
模块的的概念(官方):
关于术语的一点说明: 请务必注意一点,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中模块和命名空间的使用方法。
文章评论