AI 辅助开发面试题
探讨 AI 工具在实际开发工作中的应用场景、最佳实践和注意事项。
一、前端开发场景
1. 如何使用 AI 工具加速 UI 组件开发？
参考回答：
典型工作流：
设计稿 → 描述需求 → AI 生成基础代码 → 人工调整 → 测试验证实际案例 - 使用 AI 生成 React 组件：
typescript
// Prompt 示例
/**
* 创建一个响应式的商品卡片组件
* 要求：
* - 使用 Tailwind CSS
* - 包含图片、标题、价格、购买按钮
* - 支持 hover 效果
* - 移动端适配
*/
// AI 生成的代码
interface ProductCardProps {
image: string;
title: string;
price: number;
onBuy: () => void;
}
const ProductCard: React.FC<ProductCardProps> = ({
image,
title,
price,
onBuy
}) => {
return (
<div className="group relative bg-white rounded-lg shadow-md
hover:shadow-xl transition-shadow duration-300
w-full sm:w-64">
<img
src={image}
alt={title}
className="w-full h-48 object-cover rounded-t-lg"
/>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-800 truncate">
{title}
</h3>
<p className="text-xl font-bold text-red-500 mt-2">
¥{price.toFixed(2)}
</p>
<button
onClick={onBuy}
className="mt-4 w-full bg-blue-500 text-white py-2 rounded
hover:bg-blue-600 transition-colors"
>
立即购买
</button>
</div>
</div>
);
};效率提升：
- 基础结构生成：5 分钟 → 30 秒
- 样式调整仍需人工：保持设计还原度
2. 如何使用 AI 进行前端性能优化？
参考回答：
Prompt 模板：
markdown
请分析这段 React 代码的性能问题并提供优化建议：
[粘贴代码]
分析维度：
1. 不必要的重渲染
2. 内存泄漏风险
3. 大数据量处理
4. 懒加载机会
5. Bundle 大小优化AI 分析示例：
javascript
// 原始代码 - AI 识别的问题
function UserList({ users }) {
const [filter, setFilter] = useState('');
// 问题 1：每次渲染都创建新数组
const filteredUsers = users.filter(u =>
u.name.includes(filter)
);
// 问题 2：内联函数导致子组件重渲染
return (
<div>
<input onChange={(e) => setFilter(e.target.value)} />
{filteredUsers.map(user => (
<UserCard
key={user.id}
user={user}
onClick={() => console.log(user.id)} // 每次创建新函数
/>
))}
</div>
);
}
// AI 优化后的代码
function UserList({ users }) {
const [filter, setFilter] = useState('');
// 优化 1：使用 useMemo 缓存过滤结果
const filteredUsers = useMemo(() =>
users.filter(u => u.name.includes(filter)),
[users, filter]
);
// 优化 2：使用 useCallback 缓存回调
const handleClick = useCallback((userId) => {
console.log(userId);
}, []);
// 优化 3：提取事件处理
const handleFilterChange = useCallback((e) => {
setFilter(e.target.value);
}, []);
return (
<div>
<input onChange={handleFilterChange} />
{filteredUsers.map(user => (
<UserCard
key={user.id}
user={user}
onClick={handleClick}
/>
))}
</div>
);
}3. 如何使用 AI 生成 TypeScript 类型定义？
参考回答：
typescript
// Prompt: 根据这个 API 响应生成 TypeScript 类型定义
// 原始 JSON 数据
const apiResponse = {
"code": 200,
"data": {
"user": {
"id": 1,
"name": "张三",
"email": "zhangsan@example.com",
"roles": ["admin", "editor"],
"profile": {
"avatar": "https://...",
"bio": "...",
"createdAt": "2024-01-01T00:00:00Z"
}
},
"token": "xxx",
"expiresIn": 3600
},
"message": "success"
};
// AI 生成的类型定义
interface UserProfile {
avatar: string;
bio: string;
createdAt: string; // ISO 8601 格式
}
interface User {
id: number;
name: string;
email: string;
roles: string[];
profile: UserProfile;
}
interface LoginResponseData {
user: User;
token: string;
expiresIn: number;
}
interface ApiResponse<T> {
code: number;
data: T;
message: string;
}
type LoginResponse = ApiResponse<LoginResponseData>;
// 使用示例
async function login(credentials: LoginCredentials): Promise<LoginResponse> {
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify(credentials)
});
return response.json();
}二、后端开发场景
4. 如何使用 AI 设计数据库 Schema？
参考回答：
Prompt 模板：
markdown
设计一个电商系统的数据库 Schema，要求：
## 业务需求
- 用户管理（注册、登录、个人信息）
- 商品管理（分类、SKU、库存）
- 订单管理（购物车、订单、支付）
- 评价系统
## 技术要求
- 使用 MySQL 8.0
- 考虑索引优化
- 支持软删除
- 包含审计字段（created_at, updated_at）
## 输出格式
- 完整的建表 SQL
- ER 图描述
- 索引设计说明AI 生成示例（部分）：
sql
-- 用户表
CREATE TABLE users (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
password_hash VARCHAR(255) NOT NULL,
phone VARCHAR(20),
status TINYINT DEFAULT 1 COMMENT '1:正常 0:禁用',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
deleted_at TIMESTAMP NULL,
INDEX idx_email (email),
INDEX idx_phone (phone),
INDEX idx_status (status)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 商品表
CREATE TABLE products (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
category_id BIGINT NOT NULL,
name VARCHAR(200) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
stock INT DEFAULT 0,
status TINYINT DEFAULT 1,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX idx_category (category_id),
INDEX idx_status_price (status, price),
FULLTEXT INDEX ft_name (name)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;5. 如何使用 AI 生成 API 接口代码？
参考回答：
typescript
// Prompt: 实现一个 RESTful 的用户 CRUD 接口，使用 Express + TypeScript
// AI 生成的代码框架
import express, { Request, Response, NextFunction } from 'express';
import { body, validationResult } from 'express-validator';
const router = express.Router();
// 类型定义
interface User {
id: string;
name: string;
email: string;
createdAt: Date;
}
interface CreateUserDTO {
name: string;
email: string;
password: string;
}
// 验证中间件
const createUserValidation = [
body('name').trim().isLength({ min: 2, max: 50 }),
body('email').isEmail().normalizeEmail(),
body('password').isLength({ min: 8 }),
];
// 错误处理中间件
const validate = (req: Request, res: Response, next: NextFunction) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
next();
};
// GET /users - 获取用户列表
router.get('/', async (req: Request, res: Response) => {
try {
const { page = 1, limit = 10 } = req.query;
const users = await UserService.findAll({
page: Number(page),
limit: Number(limit)
});
res.json({ code: 200, data: users });
} catch (error) {
res.status(500).json({ code: 500, message: 'Internal Server Error' });
}
});
// POST /users - 创建用户
router.post('/', createUserValidation, validate, async (req: Request, res: Response) => {
try {
const userData: CreateUserDTO = req.body;
const user = await UserService.create(userData);
res.status(201).json({ code: 201, data: user });
} catch (error) {
if (error.code === 'DUPLICATE_EMAIL') {
return res.status(409).json({ code: 409, message: '邮箱已存在' });
}
res.status(500).json({ code: 500, message: 'Internal Server Error' });
}
});
// GET /users/:id - 获取单个用户
router.get('/:id', async (req: Request, res: Response) => {
try {
const user = await UserService.findById(req.params.id);
if (!user) {
return res.status(404).json({ code: 404, message: '用户不存在' });
}
res.json({ code: 200, data: user });
} catch (error) {
res.status(500).json({ code: 500, message: 'Internal Server Error' });
}
});
export default router;三、测试与质量保证
6. 如何使用 AI 生成单元测试？
参考回答：
typescript
// 原始函数
function calculateDiscount(
price: number,
memberLevel: 'normal' | 'vip' | 'svip',
coupon?: { type: 'percent' | 'fixed'; value: number }
): number {
let discount = 1;
// 会员折扣
switch (memberLevel) {
case 'vip':
discount = 0.9;
break;
case 'svip':
discount = 0.8;
break;
}
let finalPrice = price * discount;
// 优惠券折扣
if (coupon) {
if (coupon.type === 'percent') {
finalPrice *= (1 - coupon.value / 100);
} else {
finalPrice -= coupon.value;
}
}
return Math.max(0, Math.round(finalPrice * 100) / 100);
}
// Prompt: 为上面的函数生成完整的单元测试，覆盖所有分支
// AI 生成的测试用例
describe('calculateDiscount', () => {
describe('会员等级折扣', () => {
it('普通会员无折扣', () => {
expect(calculateDiscount(100, 'normal')).toBe(100);
});
it('VIP 会员 9 折', () => {
expect(calculateDiscount(100, 'vip')).toBe(90);
});
it('SVIP 会员 8 折', () => {
expect(calculateDiscount(100, 'svip')).toBe(80);
});
});
describe('优惠券折扣', () => {
it('百分比优惠券', () => {
expect(calculateDiscount(100, 'normal', {
type: 'percent',
value: 10
})).toBe(90);
});
it('固定金额优惠券', () => {
expect(calculateDiscount(100, 'normal', {
type: 'fixed',
value: 20
})).toBe(80);
});
});
describe('组合折扣', () => {
it('VIP + 百分比优惠券', () => {
// 100 * 0.9 * 0.9 = 81
expect(calculateDiscount(100, 'vip', {
type: 'percent',
value: 10
})).toBe(81);
});
it('SVIP + 固定优惠券', () => {
// 100 * 0.8 - 20 = 60
expect(calculateDiscount(100, 'svip', {
type: 'fixed',
value: 20
})).toBe(60);
});
});
describe('边界情况', () => {
it('价格为 0', () => {
expect(calculateDiscount(0, 'normal')).toBe(0);
});
it('优惠后价格不能为负', () => {
expect(calculateDiscount(10, 'normal', {
type: 'fixed',
value: 100
})).toBe(0);
});
it('小数精度处理', () => {
expect(calculateDiscount(99.99, 'vip')).toBe(89.99);
});
});
});7. 如何使用 AI 进行代码重构？
参考回答：
Prompt 模板：
markdown
请重构以下代码，优化方向：
1. 提高可读性
2. 减少重复
3. 遵循 SOLID 原则
4. 添加适当的类型定义
[原始代码]
约束：
- 保持功能不变
- 使用 TypeScript
- 遵循项目代码规范重构示例：
typescript
// 原始代码 - 存在多个问题
function processOrder(order) {
// 验证
if (!order.items || order.items.length === 0) {
return { success: false, error: '订单为空' };
}
if (!order.userId) {
return { success: false, error: '用户ID缺失' };
}
// 计算价格
let total = 0;
for (let i = 0; i < order.items.length; i++) {
total += order.items[i].price * order.items[i].quantity;
}
// 应用折扣
if (order.coupon) {
if (order.coupon.type === 'percent') {
total = total * (1 - order.coupon.value / 100);
} else if (order.coupon.type === 'fixed') {
total = total - order.coupon.value;
}
}
// 创建订单
const newOrder = {
id: Date.now().toString(),
userId: order.userId,
items: order.items,
total: total,
status: 'pending',
createdAt: new Date()
};
// 保存订单
saveToDatabase(newOrder);
return { success: true, order: newOrder };
}
// AI 重构后的代码
// 类型定义
interface OrderItem {
productId: string;
price: number;
quantity: number;
}
interface Coupon {
type: 'percent' | 'fixed';
value: number;
}
interface OrderInput {
userId: string;
items: OrderItem[];
coupon?: Coupon;
}
interface Order extends OrderInput {
id: string;
total: number;
status: OrderStatus;
createdAt: Date;
}
type OrderStatus = 'pending' | 'paid' | 'shipped' | 'completed';
interface Result<T> {
success: boolean;
data?: T;
error?: string;
}
// 验证器
class OrderValidator {
validate(order: OrderInput): Result<void> {
if (!order.items?.length) {
return { success: false, error: '订单为空' };
}
if (!order.userId) {
return { success: false, error: '用户ID缺失' };
}
return { success: true };
}
}
// 价格计算器
class PriceCalculator {
calculateSubtotal(items: OrderItem[]): number {
return items.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
}
applyDiscount(price: number, coupon?: Coupon): number {
if (!coupon) return price;
const discounted = coupon.type === 'percent'
? price * (1 - coupon.value / 100)
: price - coupon.value;
return Math.max(0, discounted);
}
}
// 订单服务
class OrderService {
private validator = new OrderValidator();
private calculator = new PriceCalculator();
private repository: OrderRepository;
constructor(repository: OrderRepository) {
this.repository = repository;
}
async create(input: OrderInput): Promise<Result<Order>> {
// 验证
const validation = this.validator.validate(input);
if (!validation.success) {
return validation as Result<Order>;
}
// 计算价格
const subtotal = this.calculator.calculateSubtotal(input.items);
const total = this.calculator.applyDiscount(subtotal, input.coupon);
// 创建订单
const order: Order = {
id: this.generateId(),
...input,
total,
status: 'pending',
createdAt: new Date()
};
// 保存
await this.repository.save(order);
return { success: true, data: order };
}
private generateId(): string {
return `ORD-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
}四、效率提升实践
8. AI 辅助开发的最佳工作流是什么？
参考回答：
┌─────────────────────────────────────────────────────────────────────┐
│ AI 辅助开发工作流 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. 需求分析阶段 │
│ └─► 使用 ChatGPT 梳理需求、设计方案 │
│ │
│ 2. 架构设计阶段 │
│ └─► 使用 AI 生成技术方案、评估利弊 │
│ │
│ 3. 编码实现阶段 │
│ ├─► Copilot 实时代码补全 │
│ ├─► AI 生成重复性代码（CRUD、表单等） │
│ └─► AI 生成类型定义和文档 │
│ │
│ 4. 测试阶段 │
│ ├─► AI 生成单元测试 │
│ └─► AI 辅助代码审查 │
│ │
│ 5. 部署运维阶段 │
│ ├─► AI 生成 CI/CD 配置 │
│ └─► AI 辅助问题排查 │
│ │
└─────────────────────────────────────────────────────────────────────┘关键原则：
- AI 生成 → 人工审查 → 测试验证
- 核心逻辑人工编写，辅助代码 AI 生成
- 保持对代码的完全理解
9. 如何量化 AI 辅助开发的效率提升？
参考回答：
可量化指标：
| 指标 | 传统方式 | AI 辅助 | 提升比例 |
|---|---|---|---|
| 新功能开发时间 | 8 小时 | 5 小时 | 37.5% |
| 单元测试编写 | 2 小时 | 30 分钟 | 75% |
| 文档编写 | 1 小时 | 15 分钟 | 75% |
| Bug 修复时间 | 1 小时 | 40 分钟 | 33% |
| 代码审查准备 | 30 分钟 | 10 分钟 | 67% |
注意事项：
- 学习曲线期效率可能下降
- 复杂业务逻辑提升有限
- 需要额外的审查时间
总结
AI 辅助开发面试要点
- 展示实际应用 - 用具体案例说明 AI 如何提升效率
- 强调人机协作 - AI 是工具，人是决策者
- 关注代码质量 - AI 生成的代码需要审查和测试
- 理解局限性 - 知道 AI 不擅长什么
- 持续学习 - AI 工具在快速进化
面试红线
- 不要过度依赖 AI，忽视基础能力
- 不要直接复制 AI 代码不审查
- 不要在面试中使用 AI 作弊