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"// 引入方法2

console.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):boolean
  get( 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 | undefined
  password: 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 | undefined
  password: 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()