12_TypeScript 模块以及模块化封装DB 库

TypeScript 模块

- 1、模块中暴露方法1
- 2、模块中暴露方法2
- 3、模块中暴露方法3
- 4、封装[上一节的db 库](https://blog.csdn.net/qq_46143850/article/details/140664100)
- 5、TypeScript 命名空间

模块的概念（官方）：
关于术语的一点说明：请务必注意一点， TypeScript 1.5 里术语名已经发生了变化。“内部模块”现在称为“命名空间”。
“外部模块”现在则简称为“模块”，模块在其自身的作用域里执行，而不是在全局作用域里；
这意味着定义在一个模块里的变量、函数、类等等再模块外部是不可见的，除非你明确地使用 export 形式之一导出它们。相反，如果想使用其它模块导出的变量、函数、类、接口等的时候，你必须要导入它们，可以使用 import 形式之一。

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

1、模块中暴露方法1

let dbUrl = 'xxx'
export function getData(): any[] {console.log("获取数据库中数据")return [{tit: "133"}]
}

在这里插入图片描述

2、模块中暴露方法2

let dbUrl = 'xxx'function getData(): any[] {console.log("获取数据库中数据")return [{tit: "133"}]
}export {getData,dbUrl
}

import {getData } from "./modules/db"// 引入方法1
import {getData as get} from "./modules/db"// 引入方法2console.log(get())

3、模块中暴露方法3

let dbUrl = 'xxx'function getData(): any[] {console.log("获取数据库中数据")return [{tit: "133"}]
}export  default getData

import getData from "./modules/db"console.log(getData())

4、封装上一节的db 库

modules 中 db


interface DBI<T> {add(info:T): boolean;update(info:T, id:number): boolean;delete( id:number):booleanget( id:number):any[]
}// 定义一个操作 mysql 数据库的类
// 注意：要实现泛型接口，这个类也应该是一个泛型类class MysqlDb<T> implements DBI<T> {constructor(){console.log("建立数据库连接")}add(info: T): boolean {console.log((info))return true}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[] {let list = [{title: "nihao",desc: "描述"}]return list}}
//  MssqlDb 的类class MssqlDb<T> implements DBI<T> {constructor(){console.log("建立数据库连接")}add(info: T): boolean {console.log((info))return true}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.");}
}
// MongoDb 的类
class MongoDb<T> implements DBI<T> {constructor(){console.log("建立数据库连接")}add(info: T): boolean {console.log((info))return true}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 {MysqlDb,MssqlDb,MongoDb
}// 引入
import {MysqlDb,MssqlDb, MongoDb} from "./modules/db"// 操作用户表 定义一个 user 类和数据库表做映射
class User {username: string | undefinedpassword: string | undefined
}let u = new User()
u.username = '001'
u.password = '123456'let mysql = new MysqlDb<User>() // 类作为参数来约束数据传入的类型
let mssql = new MssqlDb<User>() // 类作为参数来约束数据传入的类型
let mongodb = new MongoDb<User>() // 类作为参数来约束数据传入的类型
mysql.add(u)
mssql.add(u)
mongodb.add(u)

进一步封装：将 User 类再次封装，定义数据库的映射

// user.ts
import { MysqlDb } from "./db"
class User {username: string | undefinedpassword: string | undefined
}let UserModel = new MysqlDb<User>()
export {UserModel,User
}//index 中引入使用
import {User, UserModel} from "./modules/user"
let u = new User()
u.username = '001'
u.password = '123456'
UserModel.add(u)
UserModel.get(123)

5、TypeScript 命名空间

命名空间：
在代码量比较大的情况下，为了避免各种变量命名冲突，可将相似功能的函数、类、接口等放置到命名空间内
同 java 的包，.net 的命名空间一样，TypeScript 的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过 export 关键字进行暴露，外部使用 import 引入使用

命名空间和模块的区别：
命名空间：内部模块，主要用于组织代码，避免命名冲突。
模块：ts 的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。

不同命名空间中的变量、类、接口等可以同名。
每个模块中可以有多个命名空间，给外部使用的时候也是使用 export 进行暴露 namespace

// 命名空间默认是私有的，要在外部使用里面的函数、类、接口、都需要使用 export 进行暴露
namespace A {interface Animal {name: string;eat(str: string):void;}interface Person extends Animal {work():void}export class Programmer {name: string;constructor(name:string) {this.name = name}coding() {console.log(this.name, 'coding')}}export class Web extends Programmer implements Person {constructor(name: string) {super(name)}eat() {console.log(this.name + "吃大米")}work() {console.log(this.name + "正在工作")}}
}
let w = new A.Web("丽丝") // 实例化命名空间 A 中的 Web 类
w.work()
w.coding()