面试官：写一段代码证明你的 ts 水平

一个前端面试官，让你自由写一段 ts 代码，来证明你的 ts 水平，你可以帮我写一段吗

下面是一个简单的 TypeScript 代码示例，展示了一些 TypeScript 的基本特性，如接口、类型、类和泛型。这个例子是一个简单的任务管理应用，包括添加任务、完成任务以及列出所有任务的功能。

// 定义一个任务接口
interface Task {
  id: number;
  title: string;
  completed: boolean;
}

// 定义一个任务管理类
class TaskManager {
  private tasks: Array<Task> = [];
  private taskIdCounter: number = 1;

  // 添加任务
  public addTask(title: string): void {
    const newTask: Task = {
      id: this.taskIdCounter,
      title: title,
      completed: false
    };
    this.tasks.push(newTask);
    this.taskIdCounter++;
  }

  // 完成任务
  public completeTask(id: number): void {
    const task = this.tasks.find((task) => task.id === id);
    if (task) {
      task.completed = true;
    } else {
      console.log(`任务ID ${id} 不存在`);
    }
  }

  // 列出所有任务
  public listTasks(): void {
    console.log('任务列表:');
    this.tasks.forEach((task) => {
      console.log(`ID: ${task.id}, 标题: ${task.title}, 完成: ${task.completed ? '是' : '否'}`);
    });
  }
}

// 使用任务管理类
const taskManager = new TaskManager();
taskManager.addTask('学习 TypeScript');
taskManager.addTask('学习 React');
taskManager.listTasks();
taskManager.completeTask(1);
taskManager.listTasks();

// ----------------
// ----------------
// ----------------

这个代码可以证明你对 TypeScript 的基本概念有一定了解，包括类型注解、接口、类和泛型。当然，实际项目中 TypeScript 的使用会更加复杂，但这个示例足以展示你的基本技能。

可以更多一点吗

当然可以。下面的示例包含了 TypeScript 的一些更高级的特性，如装饰器、类型保护、联合类型、类型别名、映射类型等。这个示例展示了一个简单的事件总线，可以在组件之间发送和接收事件。

// 事件类型
type EventType = string;

// 事件处理程序类型
type EventHandler<T> = (eventData: T) => void;

// 定义一个事件映射类型
type EventMap = {
  [key: string]: unknown;
};

// 定义一个类型保护函数
function isEventType(event: string | symbol): event is EventType {
  return typeof event === 'string';
}

// 事件总线类
class EventBus<E extends EventMap> {
  private listeners: Map<EventType, Array<EventHandler<unknown>>> = new Map();

  // 添加事件监听
  public on<T extends keyof E>(event: T, handler: EventHandler<E[T]>): void {
    if (isEventType(event)) {
      const handlers = this.listeners.get(event) || [];
      handlers.push(handler);
      this.listeners.set(event, handlers);
    }
  }

  // 移除事件监听
  public off<T extends keyof E>(event: T, handler: EventHandler<E[T]>): void {
    if (isEventType(event)) {
      const handlers = this.listeners.get(event);
      if (handlers) {
        this.listeners.set(
          event,
          handlers.filter((h) => h !== handler)
        );
      }
    }
  }

  // 触发事件
  public emit<T extends keyof E>(event: T, eventData: E[T]): void {
    if (isEventType(event)) {
      const handlers = this.listeners.get(event);
      if (handlers) {
        handlers.forEach((handler) => (handler as EventHandler<E[T]>)(eventData));
      }
    }
  }
}

// 使用示例

// 事件类型及其对应的数据类型
interface MyEvents {
  'user.login': {username: string; password: string};
  'user.logout': {username: string};
}

// 创建事件总线实例
const eventBus = new EventBus<MyEvents>();

// 添加事件监听
eventBus.on('user.login', ({username, password}) => {
  console.log(`用户 ${username} 登录，密码：${password}`);
});

eventBus.on('user.logout', ({username}) => {
  console.log(`用户 ${username} 登出`);
});

// 触发事件
eventBus.emit('user.login', {username: '张三', password: '123456'});
eventBus.emit('user.logout', {username: '张三'});

这个示例中的事件总线可以让你展示对 TypeScript 更高级特性的理解，包括类型保护、联合类型、类型别名、映射类型等。这将展示你具有较高水平的 TypeScript 技能。