如何从TypeScript的ArrayLike泛型提取基础类型？泛型类写法咨询

嘿，这个问题我刚好碰到过！TypeScript确实没有内置的ArrayMember工具类型，但我们可以自己用条件类型结合类型推断来实现它，完美匹配你的需求。

第一步：自定义ArrayMember工具类型 #

我们可以利用TypeScript的条件类型和infer关键字来提取ArrayLike中的元素类型：

// 定义工具类型：从ArrayLike类型中提取元素类型
type ArrayMember<T extends ArrayLike<any>> = T extends ArrayLike<infer U> 
  ? U 
  : never;

• T extends ArrayLike<any>：约束泛型参数T必须是符合ArrayLike接口的类型（比如数组、NodeList、arguments对象等）
• infer U：让TypeScript自动推断ArrayLike中的元素类型，并将其赋值给U
• 最后返回推断出的U，如果不符合约束则返回never

第二步：用工具类型定义你的类 #

现在就可以按照你想要的思路来定义Test类了，只需要给泛型参数加上ArrayLike的约束：

class Test<T extends ArrayLike<any>> {
  arr: T;
  current: ArrayMember<T>;
}

验证一下效果 #

我们可以用不同的ArrayLike类型来测试，确保类型推断正确：

// 普通数组示例
const numberTest = new Test<number[]>();
numberTest.arr = [1, 2, 3];
numberTest.current = 4; // 类型为number，符合预期

// DOM类数组示例
const elementTest = new Test<NodeListOf<HTMLElement>>();
elementTest.arr = document.querySelectorAll('div');
elementTest.current = document.querySelector('p'); // 类型为HTMLElement，正确

补充：为什么你最初的写法不合法 #

你一开始尝试的class Test<ArrayLike<I>>写法不符合TypeScript泛型的语法规则：泛型参数需要是一个类型变量（比如<T>），而不是直接写一个具体的类型（比如ArrayLike<I>）。我们的解决方案是把泛型参数设为符合ArrayLike约束的类型变量，再从中提取元素类型，这才是TypeScript支持的写法。

内容的提问来源于stack exchange，提问作者Morgan Gethin Barrett