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"

相关推荐
用户250694921616 分钟前
next框架打包.next文件夹部署
前端
程序猿小蒜9 分钟前
基于springboot的校园社团信息管理系统开发与设计
java·前端·spring boot·后端·spring
一叶难遮天9 分钟前
开启RN之旅——前端基础
前端·javascript·promise·js基础·es6/ts·npm/nrm
申阳10 分钟前
Day 4:02. 基于Nuxt开发博客项目-整合 Inspira UI
前端·后端·程序员
程序猿_极客14 分钟前
【期末网页设计作业】HTML+CSS+JavaScript 猫咪主题网站开发(附源码与效果演示)
前端·css·html·课程设计·网页设计作业
IT古董14 分钟前
【前端】从零开始搭建现代前端框架:React 19、Vite、Tailwind CSS、ShadCN UI 完整实战教程-第1章:项目概述与技术栈介绍
前端·react.js·前端框架
有点笨的蛋16 分钟前
从零搭建小程序首页:新手也能看懂的结构解析与实战指南
前端·微信小程序
爱宇阳16 分钟前
Vue3 前端项目 Docker 容器化部署教程
前端·docker·容器
Irene199117 分钟前
前端缓存技术和使用场景
前端·缓存
BetterChinglish26 分钟前
html5中canvas图形变换transform、setTransform原理(变换矩阵)
javascript·html5·canvas·变换矩阵