typescript 模块化

模块的概念:

把一些公共的功能单独抽离成一个文件作为一个模块。

模块里面的变量、函数、类等默认是私有的,如果我们要在外部访问模块里面的数据(变量、函数、类),需要通过export暴露模块里面的数据((变量、函数、类...)

暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据
db.ts

javascript 复制代码
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> {
    add(info: T): boolean {
        console.log(info, 'MysqlDb');
        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.");
    }
}
// 定义一个操作mssql数据库的类
export class MsSqlDb<T> implements DBI<T> {
    constructor() {
        console.log('数据库建立连接');
    }
    add(info: T): boolean {
        console.log(info, 'MsSqlDb');
        return true
        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[] {
        var list = [
            {
                title: '',
                desc: ''
            }
        ]
        return list
        throw new Error("Method not implemented.");
    }
}

user.ts

javascript 复制代码
import { MsSqlDb } from '../db.js'

// 操作用户表 定义一个User类和数据库表做映射
class UserClass {
    username: string | undefined;
    password: string | undefined
}

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

article.ts

javascript 复制代码
import { MsSqlDb } from '../db.js'

// 操作用户表 定义一个User类和数据库表做映射
class ArticleClass {
    username: string | undefined;
    password: string | undefined
}

var ArticleModel = new MsSqlDb<ArticleClass>();
export {
    ArticleClass,
    ArticleModel
}

index.ts

javascript 复制代码
import { UserModel, UserClass } from './module/user.js'
import { ArticleModel, ArticleClass } from './module/article.js'


// 增加数据
var u = new UserClass()
u.username = '用户名'
u.password = '密码'
UserModel.add(u)

// 获取数据
console.log(UserModel.get(1));

// 文章表
console.log(ArticleModel.get(1));

如果引入有错误,

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

在当前目录下 npm init 生成 package.json 文件,添加 "type": "module"

相关推荐
陈_杨2 分钟前
鸿蒙5开发宝藏案例分享---切面编程实战揭秘
前端
喵手9 分钟前
CSS3 渐变、阴影和遮罩的使用
前端·css·css3
顽强d石头10 分钟前
bug:undefined is not iterable (cannot read property Symbol(Symbol.iterator))
前端·bug
烛阴20 分钟前
模块/命名空间/全局类型如何共存?TS声明空间终极生存指南
前端·javascript·typescript
火车叼位23 分钟前
Git 精准移植代码:cherry-pick 简单说明
前端·git
江城开朗的豌豆27 分钟前
JavaScript篇:移动端点击的300ms魔咒:你以为用户手抖?其实是浏览器在搞事情!
前端·javascript·面试
华洛34 分钟前
聊聊我们公司的AI应用工程师每天都干啥?
前端·javascript·vue.js
江城开朗的豌豆34 分钟前
JavaScript篇:你以为事件循环都一样?浏览器和Node的差别让我栽了跟头!
前端·javascript·面试
技术小丁37 分钟前
使用 HTML +JavaScript 从零构建视频帧提取器
javascript·html·音视频
gyx_这个杀手不太冷静37 分钟前
Vue3 响应式系统探秘:watch 如何成为你的数据侦探
前端·vue.js·架构