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"

相关推荐
FreeTinker4 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396234 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
海兰5 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
wangruofeng5 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne5 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel6 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
小磊哥er6 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
何以解忧,唯有..7 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
小磊哥er7 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程
海兰7 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(一)
javascript·python·金融