TypeScript中如何调用数组内不同实例元素的专属方法？

这个问题我之前也踩过坑！本质是TypeScript的类型收窄机制在起作用——你的数组被推断成了(Child1 | Child2 | Child3)[]这种联合类型数组，TS没法确定数组中每个元素具体属于哪个子类，所以直接调用子类专属方法时会抛出类型错误。下面给你几个实用的解决思路：

1. 类型断言（快速直接，但需谨慎） #

如果你明确知道数组元素的具体类型，可以用类型断言告诉TS“我确定这个元素是XX子类”：

// 断言array[1]是Child2类型
(array[1] as Child2).getSpecialName();
// 断言array[2]是Child3类型
(array[2] as Child3).getStrangeName();

⚠️ 注意：如果断言的类型和实际元素类型不匹配，运行时会报错，所以只适合你100%确定元素类型的场景。

2. 类型守卫（安全可靠，推荐） #

让TypeScript自动推断元素类型，常用的方式有两种：

用instanceof做类型守卫 #

利用instanceof检查元素的构造函数，TS会自动收窄类型：

for (const item of array) {
  if (item instanceof Child2) {
    // TS知道这里item是Child2类型，可直接调用getSpecialName
    item.getSpecialName();
  } else if (item instanceof Child3) {
    item.getStrangeName();
  } else if (item instanceof Child1) {
    item.getChildOneSpecialName();
  }
}

自定义类型守卫（适合复杂场景） #

如果子类有独特的标识属性（比如一个type字段），可以写自定义守卫函数：

// 先给每个子类添加唯一标识
class BasicClass { getName() { console.log('My name is BasicClass'); } }
class Child1 extends BasicClass { 
  readonly type = 'child1' as const;
  getChildOneSpecialName() { console.log('My getChildOneSpecialName is Child1'); } 
}
class Child2 extends BasicClass { 
  readonly type = 'child2' as const;
  getSpecialName() { console.log('My special name is Child2'); } 
}
class Child3 extends BasicClass { 
  readonly type = 'child3' as const;
  getStrangeName() { console.log('My getStrangeName is Child3'); } 
}

// 自定义类型守卫函数
function isChild2(item: BasicClass): item is Child2 {
  return (item as Child2).type === 'child2';
}

// 使用示例
const targetItem = array[1];
if (isChild2(targetItem)) {
  targetItem.getSpecialName(); // TS自动推断为Child2类型
}

3. 代码重构（长期优化方向） #

如果你的业务场景允许，可以考虑通过多态来统一方法调用：在基类中定义抽象方法，让子类实现各自的逻辑。比如：

abstract class BasicClass { 
  getName() { console.log('My name is BasicClass'); }
  // 定义抽象方法，子类必须实现
  abstract getSpecialInfo(): void;
}

class Child1 extends BasicClass { 
  getSpecialInfo() { console.log('My getChildOneSpecialName is Child1'); } 
}
class Child2 extends BasicClass { 
  getSpecialInfo() { console.log('My special name is Child2'); } 
}
class Child3 extends BasicClass { 
  getSpecialInfo() { console.log('My getStrangeName is Child3'); } 
}

const array = [new Child1(), new Child2(), new Child3()];
// 现在可以直接调用统一方法，TS不会报错
array.forEach(item => item.getSpecialInfo());

这种方式更符合面向对象的设计原则，但前提是子类的专属方法可以被抽象成统一的接口。

内容的提问来源于stack exchange，提问作者mr__brainwash