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)');
    });
});
相关推荐
脑袋大大的30 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0139 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
goldenocean4 小时前
React之旅-05 List Key
前端·javascript·react.js
Mintopia5 小时前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia5 小时前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js