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"

相关推荐
a濯5 小时前
element plus el-table多选框跨页多选保留
javascript·vue.js
蓝婷儿5 小时前
前端面试每日三题 - Day 32
前端·面试·职场和发展
星空寻流年6 小时前
CSS3(BFC)
前端·microsoft·css3
九月TTS6 小时前
开源分享:TTS-Web-Vue系列:Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
H309197 小时前
vue3+dhtmlx-gantt实现甘特图展示
android·javascript·甘特图
CodeCraft Studio7 小时前
数据透视表控件DHTMLX Pivot v2.1发布,新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程7 小时前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹7 小时前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS7 小时前
TTS-Web-Vue系列:移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js
Johnstons7 小时前
AnaTraf:深度解析网络性能分析(NPM)
前端·网络·安全·web安全·npm·网络流量监控·网络流量分析