React + TypeScript 实战：从零实现数据库连接与交互

React + TypeScript 实战：从零实现数据库连接与数据交互

目录

1. 技术选型与架构设计
2. 环境搭建与基础配置
3. 数据库连接实战场景
   • 场景一：MSSQL 企业级应用连接
   • 场景二：MySQL 轻量级方案实现
   • 场景三：MongoDB NoSQL集成
4. TypeORM进阶：强类型数据操作
5. 常见问题与调试技巧
6. 最佳实践与性能优化

一、技术选型与架构设计

在React+TypeScript全栈开发中，推荐采用分层架构：

• 前端层：React 19（最新稳定版） + TypeScript 5.3
• 中间层：Express 5.x + TypeScript运行时支持
• 数据层：MSSQL/MySQL/MongoDB + 类型化ORM

（数据流说明：React→Axios→Express→Database Driver）

二、环境搭建与基础配置

2.1 初始化项目结构

# 创建React+TS前端项目
npx create-react-app db-client --template typescript

# 初始化Node.js后端服务
mkdir server && cd server
npm init -y
npm install express mssql mysql2 mongoose typescript ts-node @types/express --save

2.2 TypeScript双端配置

前端配置 (tsconfig.json)：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true
  }
}

后端配置 (server/tsconfig.json)：

{
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

注：后端采用CommonJS模块规范以兼容Node.js生态13

三、数据库连接实战场景

场景一：MSSQL企业级应用连接

技术栈：mssql + Connection Pool

实现步骤：

1. 创建数据库服务文件 src/db/mssql.ts：

import { ConnectionPool, config } from 'mssql';

const dbConfig: config = {
  user: 'SA',
  password: 'yourStrongPassword',
  server: 'localhost',
  database: 'EnterpriseDB',
  options: {
    encrypt: true,
    trustServerCertificate: true // 本地开发可启用
  }
};

export const pool = new ConnectionPool(dbConfig);
pool.connect().then(() => 
  console.log('MSSQL连接成功')).catch(console.error);

2. 创建数据访问层：

// src/services/ProductService.ts
import { pool } from '../db/mssql';

interface Product {
  id: number;
  name: string;
  price: number;
}

export const getProducts = async (): Promise<Product[]> => {
  const result = await pool.query`SELECT * FROM Products`;
  return result.recordset;
};

特点：
✅ 支持连接池管理与事务控制
⚠️ 需注意SQL注入防护（建议使用参数化查询）
参考实现：1(https://www.oryoy.com/news/shi-yong-typescript-he-node-js-shi-xian-react-ying-yong-yu-mssql-shu-ju-ku-de-gao-xiao-lian-jie-yu-s.html)

场景二：MySQL轻量级方案实现

技术栈：mysql2 + Promise Wrapper

优化配置：

// src/db/mysql.ts
import { createPool, Pool } from 'mysql2/promise';

export const pool: Pool = createPool({
  host: '127.0.0.1',
  user: 'root',
  database: 'ecommerce',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

CRUD示例：

// src/repositories/UserRepository.ts
interface User {
  id: number;
  email: string;
  createdAt: Date;
}

export const createUser = async (email: string): Promise<User> => {
  const [result] = await pool.execute(
    'INSERT INTO users (email) VALUES (?)',
    [email]
  );
  return { id: result.insertId, email, createdAt: new Date() };
};

性能对比：

数据来源：MySQL 8.0 vs MSSQL 2022基准测试3(https://blog.csdn.net/weixin_46326780/article/details/135378910)

场景三：MongoDB NoSQL集成

技术栈：Mongoose 8.x + TypeScript类型绑定

模式定义：

// src/models/Post.ts
import { Schema, model } from 'mongoose';

interface IPost {
  title: string;
  content: string;
  tags: string[];
}

const PostSchema = new Schema<IPost>({
  title: { type: String, required: true },
  content: { type: String, required: true },
  tags: [{ type: String }]
});

export const Post = model<IPost>('Post', PostSchema);

聚合查询示例：

export const getPostsByTag = async (tag: string) => {
  return Post.aggregate([
    { $match: { tags: tag } },
    { $project: { title: 1, excerpt: { $substr: ['$content', 0, 100] } } }
  ]);
};

优势分析：

• 灵活的数据模式适应快速迭代需求
• 原生支持JSON数据类型，简化复杂结构处理
• 横向扩展能力强于传统关系型数据库

完整案例参考：2(https://m.blog.csdn.net/2401_84434086/article/details/140190442)

四、TypeORM进阶：强类型数据操作

推荐使用TypeORM 0.3.x实现类型安全：

// src/entities/Order.ts
import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity()
export class Order {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({ type: 'decimal', precision: 10, scale: 2 })
  total: number;

  @Column({ enum: ['pending', 'shipped', 'delivered'] })
  status: string;
}

// 查询示例
const repo = dataSource.getRepository(Order);
const orders = await repo.find({ 
  where: { status: 'delivered' },
  order: { total: 'DESC' }
});

核心特性：

• 自动生成SQL迁移脚本
• 支持Active Record与Data Mapper模式
• 完善的类型推断系统

高级技巧参考：6(https://m.blog.csdn.net/weixin_39857174/article/details/111755935)

五、常见问题与调试技巧

5.1 连接超时问题排查

# 诊断网络连通性
telnet database-host 1433
nc -zv database-host 3306

# 查看连接池状态
console.log(pool.state); // MSSQL
console.log(pool.pool.status); // MySQL

5.2 类型不匹配错误处理

// 解决方案：显式类型断言
const result = await pool.query<Product>(sql);
return result.recordset as Product[];

5.3 性能优化建议

1. 启用连接池复用（建议连接数=CPU核心数*2 + 磁盘数）
2. 使用ORM缓存机制
3. 批量操作替代循环单次插入

错误处理完整指南参考：4(https://ask.csdn.net/questions/8097354)5(https://www.cnblogs.com/webSciprt/articles/10722013.html)

六、最佳实践与性能优化

6.1 安全防护方案

• 使用环境变量管理敏感信息（推荐dotenv）
• 启用SSL/TLS加密数据库连接
• 实施RBAC权限控制

6.2 监控方案选型

（全文完）
原创声明：本文采用 CC BY-NC-SA 4.0 协议，转载请注明出处。技术问题欢迎在评论区讨论交流。

参考资料：

1. MSSQL连接实战 - ORYOY技术社区 1
2. Todo App实现案例 - CSDN博客 2
3. Node.js连接数据库原理 - CSDN技术专栏 3
4. 错误排查指南 - CSDN问答 4
5. TypeScript开发技巧 - 博客园 5
6. 强类型数据库访问 - CSDN深度文章 6

附录：

• TypeScript官方文档
• React最新特性解读

（注：部分截图来自技术文档公开资源，版权归原作者所有）