HOW - 用 Typescript 编写一个比较好的 Class

目录

一、介绍

  1. 代码格式统一。包括统一缩进和尽量使用清晰且统一风格的变量和函数命名
  2. 注释和文档。编写必要且清晰的注释和文档
  3. 使用让面试官眼前一亮的现代新特性,代码简洁。例如可选链(Optional Chaining)、空值合并运算符(Nullish Coalescing Operator)等
  4. 执行性能有一定优化
  5. 遵循模块化设计。将代码分割成多个模块,便于管理和重用
  6. 错误处理。确保代码对错误有良好的处理机制,包括同步和异步错误
  7. 考虑到扩展性
  8. 单元测试

二、示例

以下是一个包含上述要素的示例TypeScript类,以及相应的单元测试:

2.1 示例类代码

typescript 复制代码
// utils/Logger.ts
export class Logger {
    log(message: string): void {
        console.log(message);
    }
    error(message: string): void {
        console.error(message);
    }
}

// models/User.ts
export class User {
    constructor(
        private id: number,
        private name: string,
        private email: string,
        private logger: Logger
    ) {}

    // 获取用户的简短描述
    getSummary(): string {
        return `User: ${this.name} (${this.email})`;
    }

    // 更新用户邮箱
    updateEmail(newEmail: string): void {
        if (this.validateEmail(newEmail)) {
            this.email = newEmail;
            this.logger.log(`Email updated to ${newEmail}`);
        } else {
            this.logger.error('Invalid email address');
        }
    }

    // 验证邮箱格式
    private validateEmail(email: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
}

// index.ts
import { Logger } from './utils/Logger';
import { User } from './models/User';

const logger = new Logger();
const user = new User(1, 'John Doe', 'john.doe@example.com', logger);

console.log(user.getSummary());
user.updateEmail('new.email@example.com');

2.2 单元测试

typescript 复制代码
// tests/User.test.ts
import { Logger } from '../utils/Logger';
import { User } from '../models/User';

describe('User', () => {
    let logger: Logger;
    let user: User;

    beforeEach(() => {
        logger = new Logger();
        user = new User(1, 'John Doe', 'john.doe@example.com', logger);
    });

    it('should return user summary', () => {
        expect(user.getSummary()).toBe('User: John Doe (john.doe@example.com)');
    });

    it('should update email if valid', () => {
        const newEmail = 'new.email@example.com';
        user.updateEmail(newEmail);
        expect(user.getSummary()).toBe(`User: John Doe (${newEmail})`);
    });

    it('should not update email if invalid', () => {
        const invalidEmail = 'invalid-email';
        user.updateEmail(invalidEmail);
        expect(user.getSummary()).toBe('User: John Doe (john.doe@example.com)');
    });
});
相关推荐
阿正的梦工坊9 分钟前
【Typescript】14-高级实战-设计类型安全的-api
typescript
来恩100331 分钟前
jQuery选择器
前端·javascript·jquery
前端繁华如梦33 分钟前
树上挂苹果还是挂玻璃球?Three.js 程序化果实的完整实现指南
前端·javascript
CDwenhuohuo1 小时前
优惠券组件直接用 uview plus
前端·javascript·vue.js
川冰ICE2 小时前
TypeScript装饰器与元编程实战
前端·javascript·typescript
AI砖家2 小时前
Vue3组件传参大全,各种传参方式的对比
前端·javascript·vue.js
希望永不加班2 小时前
var局部变量类型推断的利弊
java·服务器·前端·javascript·html
threelab2 小时前
Three.js 3D 地图可视化 | 三维可视化 / AI 提示词
前端·javascript·人工智能·3d·着色器
失眠的咕噜3 小时前
PDA 安卓设备上传多张图片
android·前端·javascript
掰头战士3 小时前
深入了解JS原型及原型继承链机制
javascript