08Typescript中的模块

发表于 分类于 阅读次数：

模块的的概念（官方）:

关于术语的一点说明: 请务必注意一点，TypeScript 1.5 里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。
“外部模块”现在则简称为“模块” 模块在其自身的作用域里执行，而不是在全局作用域里；

这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用 export 形式之一导出它们。
相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用 import 形式之一。

换句话说：

我们可以把一些公共的功能单独抽离成一个文件作为一个模块。
模块里面的变量 函数 类等默认是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类），
我们需要通过 export 暴露模块里面的数据（变量、函数、类…）。
暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类…）。

模块是自声明的；两个模块之间的关系是通过在文件级别上使用 imports 和 exports 建立的。

导出

导出声明

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加 export 关键字来导出。

db.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 变量
export var dbUrl = "xxxxxx";
// 函数
export function getData(): void {
  console.log("获取数据库的数据");
}
// 类型别名或接口
export interface DBI<T> {
  add(info: T): boolean;
  update(info: T, id: number): boolean;
  delete(id: number): boolean;
  get(id: number): any[];
}
// 类
export class MysqlDb<T> implements DBI<T> {
  constructor() {
    console.log("数据库建立连接");
  }
  add(info: T): boolean {
    throw new Error("Method not implemented.");
  }
  update(info: T, id: number): boolean {
    throw new Error("Method not implemented.");
  }
  delete(id: number): boolean {
    throw new Error("Method not implemented.");
  }
  get(id: number): any[] {
    throw new Error("Method not implemented.");
  }
}

导出语句

导出语句很便利，因为我们可能需要对导出的部分重命名，所以上面的例子可以这样改写：

db.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 变量
var dbUrl = "xxxxxx";
// 函数
function getData(): void {
  console.log("获取数据库的数据");
}
// 类型别名或接口
interface DBI<T> {
  add(info: T): boolean;
  update(info: T, id: number): boolean;
  delete(id: number): boolean;
  get(id: number): any[];
}
// 类
class MysqlDb<T> implements DBI<T> {
  constructor() {
    console.log("数据库建立连接");
  }
  add(info: T): boolean {
    throw new Error("Method not implemented.");
  }
  update(info: T, id: number): boolean {
    throw new Error("Method not implemented.");
  }
  delete(id: number): boolean {
    throw new Error("Method not implemented.");
  }
  get(id: number): any[] {
    throw new Error("Method not implemented.");
  }
}

export { dbUrl, getData as fecthData, DBI, MysqlDb };

导入

模块的导入操作与导出一样简单。 可以使用以下 import 形式之一来导入其它模块中的导出内容。

index.ts

1
2
import { dbUrl, fecthData, DBI, MysqlDb } from "./db";
var a = new MysqlDb();

可以对导入内容重命名

1
2
import { dbUrl, fecthData, DBI, MysqlDb as MSD } from "./db";
var a = new MSD();

将整个模块导入到一个变量，并通过它来访问模块的导出部分

1
2
import * as dbObj from "./db";
var a = new dbObj.MysqlDb();

默认导出

每个模块都可以有一个 default 导出。 默认导出使用 default 关键字标记；并且一个模块只能够有一个 default 导出。 需要使用一种特殊的导入形式来导入 default 导出。

db.ts

1
2
3
4
5
// 函数
function getData(): void {
  console.log("获取数据库的数据");
}
exprot default getData;

也可以直接被标记为默认导出

1
2
3
4
// 函数
exprot default function getData(): void {
  console.log("获取数据库的数据");
}

index.ts

1
2
import getData from "./modules/db";
getData(); // 获取数据库的数据

综合示例

modules/db.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
interface DBI<T> {
  add(info: T): boolean;
  update(info: T, id: number): boolean;
  delete(id: number): boolean;
  get(id: number): any[];
}

//定义一个操作mysql数据库的类

export class MySqlDb<T> implements DBI<T> {
  constructor() {
    console.log("数据库建立连接");
  }
  add(info: T): boolean {
    console.log("添加数据成功：" + JSON.stringify(info));
    return true;
  }

  update(info: T, id: number): boolean {
    console.log("更新数据id:" + id + "成功：" + JSON.stringify(info));
    return true;
  }
  delete(id: number): boolean {
    console.log("删除数据id:" + id + "成功");
    return true;
  }
  get(id: number): any[] {
    console.log("获取数据id:" + id + "成功");
    return [
      {
        title: "xxxx",
      },
    ];
  }
}

model/user.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { MySqlDb } from "../modules/db";

//定义数据库的映射
class UserClass {
  username: string;
  password: string;
  constructor(username: string, password: string) {
    this.username = username;
    this.password = password;
  }
}

var UserModel = new MySqlDb<UserClass>();
export { UserClass, UserModel };

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import { UserClass, UserModel } from "./model/user";

// 增加数据
var zs = new UserClass("张三", "123456");
UserModel.add(zs); // 添加数据成功：{"username":"张三","password":"123456"}
// 更新数据
var ls = new UserClass("李四", "123456"); // 更新数据id:1成功：{"username":"李四","password":"123456"}
UserModel.update(ls, 1);
// 删除数据
UserModel.delete(1); // 删除数据id:1成功
// 查询数据
var res = UserModel.get(123); // 获取数据id:123成功
console.log(res); // [ { title: 'xxxx' } ]