具有相同键但不同类型的Typescript实现接口

在TypeScript中，有时我们需要定义一个接口，该接口的某些属性可以是多种类型之一。这通常通过使用联合类型（Union Types）来实现。以下是一个示例，展示了如何定义一个具有相同键但不同类型的接口。

基础概念

接口（Interface）：TypeScript中的一个抽象类型，用于定义对象的形状。 联合类型（Union Types）：允许变量具有多种类型之一。

示例代码

假设我们有一个接口User，其中age属性可以是number或string类型（例如，有时年龄可能以字符串形式存储，如“未知”）。

interface User {
  name: string;
  age: number | string; // 联合类型
}

应用场景

这种类型定义在以下场景中非常有用：

当属性的值可能来自不同的数据源，且这些数据源有不同的数据类型时。
当属性的值可能表示不同的状态或情况，每种状态对应不同的类型时。

示例应用

假设我们正在开发一个用户管理系统，用户的年龄可能来自不同的数据源：

从数据库读取时，年龄通常是number类型。
从用户输入或某些外部API获取时，年龄可能是string类型（例如，“未知”或“成年”）。

function printUserAge(user: User) {
  if (typeof user.age === 'number') {
    console.log(`Age is a number: ${user.age}`);
  } else if (typeof user.age === 'string') {
    console.log(`Age is a string: ${user.age}`);
  }
}

const user1: User = { name: "Alice", age: 30 };
const user2: User = { name: "Bob", age: "unknown" };

printUserAge(user1); // 输出: Age is a number: 30
printUserAge(user2); // 输出: Age is a string: unknown

可能遇到的问题及解决方法

问题：在使用联合类型时，可能会遇到类型检查不严格的问题，导致运行时错误。

解决方法：

类型守卫（Type Guards）：使用typeof或自定义类型守卫函数来缩小变量的类型范围。
类型断言（Type Assertions）：在某些情况下，可以使用类型断言来明确指定变量的类型。

function isNumberAge(age: number | string): age is number {
  return typeof age === 'number';
}

function processUser(user: User) {
  if (isNumberAge(user.age)) {
    // 在这里，TypeScript知道user.age是number类型
    console.log(`Processing numeric age: ${user.age}`);
  } else {
    // 在这里，TypeScript知道user.age是string类型
    console.log(`Processing string age: ${user.age}`);
  }
}

通过这种方式，可以确保在处理不同类型的属性时，代码的类型安全性得到保障。