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


模块的概念(官方)
关于术语的一点说明:请务必注意一点, 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()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值