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"

相关推荐
子春一11 分钟前
Flutter for OpenHarmony:构建一个智能长度单位转换器,深入解析 Flutter 中的多字段联动、输入同步与工程化表单设计
开发语言·javascript·flutter
2601_9496130214 分钟前
flutter_for_openharmony家庭药箱管理app实战+用药提醒列表实现
服务器·前端·flutter
利刃大大14 分钟前
【Vue】scoped作用 && 父子组件通信 && props && emit
前端·javascript·vue.js
-凌凌漆-23 分钟前
【Vue】Vue3 vite build 之后空白
前端·javascript·vue.js
心柠23 分钟前
前端工程化
前端
摘星编程30 分钟前
用React Native开发OpenHarmony应用:useImperativeHandle暴露实例方法
javascript·react native·react.js
沐雪架构师34 分钟前
核心组件2
前端
qq_3363139336 分钟前
javaweb-Vue3
前端·javascript·vue.js
Mr Xu_36 分钟前
UniApp 实战:深度解析 App 端自动检测与静默更新(含强制更新)
javascript·vue.js·uni-app
小圣贤君41 分钟前
Electron 桌面应用接入通义万相:文生图从 0 到 1 实战
前端·electron·ai写作·通义万相·ai生图·写作软件·小说封面