TypeScript 模块模块化封装“模拟操作数据库”

最新推荐文章于 2024-06-04 15:31:12 发布

liun_n

最新推荐文章于 2024-06-04 15:31:12 发布

阅读量1.1k

点赞数 1

分类专栏： TypeScript 文章标签： javascript html5 css3

本文链接：https://blog.youkuaiyun.com/qq_39706777/article/details/121374341

版权

TypeScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用TypeScript进行模块化编程，包括导出与导入语法，并通过模拟数据库操作演示了类、接口及泛型的综合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块里的数据是私有的，如果我们想在外部使用模块内的数据（变量、函数、类），我们首先要在模块里通过 export 把数据暴露出来，暴露后通过 import 引入模块，就可以使用模块里暴露的数据了。

单个导出：

export var dbUrl = 'xxx'

export function getData():void{
    console.log('getData...');
}

import { getData, dbUrl } from './modules/db'
getData()  //getData...
console.log(dbUrl);  //xxx

另一种，整体导出：

var dbUrl = 'xxx'

function getData():void{
    console.log('getData...');
}

export { dbUrl,getData }

export default 默认导出，一个模块只能使用一次

var dbUrl = 'xxx'

function getData():void{
    console.log('getData...');
}

export default getData

引入 export default 导出的数据时，不用加花括号了

import getData from './modules/db'
getData()  //getData...

🌰 TypeScript 模块化封装“模拟操作数据库”

把这个 🔗TypeScript 类型、类、接口、泛型综合使用，练习模拟操作数据库里面写的练习“模拟操作数据库”使用模块化封装。
modules/db.ts :

interface DBI<T>{
    add(info:T):boolean;
    delete(id:number):boolean;
    update(info:T,id:number):boolean;
    get(id:number):any;
}

class Mysql<T> implements DBI<T>{
    add(info: T): boolean {
        console.log('add success');
        return true
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number) {
        console.log('get success');
        return {
            name:'xxx'
        }
    }
}

export {Mysql}

index.ts :

import {Mysql} from './modules/db'

// User 类，映射 User 数据表
class User{
    name:string|undefined;
    age:number|undefined;
}
let u = new User()
u.name = 'lucy'

let omysql = new Mysql<User>()
omysql.add(u)    //User { name: 'lucy' }
omysql.get(12)  // get success

// Job类，映射Job数据表
class Job{
    type:string|undefined;
    desc:string|undefined;
}
let j = new Job()
j.type = 'web'
j.desc = 'web 前端'

let omysql2 = new Mysql<Job>()
omysql2.add(j)    //Job { type: 'web', desc: 'web 前端' }
omysql2.get(12)  // get success

上面我们把数据库的操作使用模块化封装了，但是映射数据表的类那里还是会有重复代码，需要进一步封装。改进👇

modules/db.ts 文件不变，增加 model/User.ts、model/Job.ts。

model/User.ts:(model/Job.ts与其类似，就不展示了)

import { Mysql } from '../modules/db'

class User{
    name:string|undefined;
    age:number|undefined;
}
let userMysql = new Mysql<User>()

export { User,userMysql }

index.ts:

import { User, userMysql } from './model/User'
import { Job, jobMysql } from './model/Job'

let u = new User()
u.name = 'lucy'
u.age = 12
userMysql.add(u)   //User { name: 'lucy', age: 12 }
userMysql.get(1)   //get success

let j = new Job()
j.type = 'web'
j.desc = 'balabala..'
jobMysql.add(j)  //Job { type: 'web', desc: 'balabala..' }