TypeScript泛型数组自动补全假设元素同构，如何提示可选属性melons？

这个行为是TypeScript泛型类型推断的设计特性导致的：

• 当你定义泛型约束为<T extends Fruits[]>时，TS在推断泛型T的具体类型时，会优先以你实际传入的数组元素的结构为基准收窄类型，而非直接采用约束的Fruits类型作为补全参考。
• 第一个调用场景下，你传入的两个数组元素都仅包含apples属性，TS推断数组元素的类型为{ apples: number }，这个类型本身符合Fruits的约束要求，因此自动补全只会基于推断出来的收窄类型提供属性提示，melons不会被识别为对象的可选属性，只会出现在全局作用域的标识符列表中，位置非常靠后。
• 第二个调用场景下，第一个元素显式声明了melons属性，TS推断数组元素类型时会把melons纳入类型定义，推断出来的元素类型和Fruits完全匹配，因此melons会作为对象属性正常出现在补全列表中。

有两种常用方案可以修复自动补全问题：

方案1：去掉泛型，直接声明参数为Fruits数组 #

如果不需要保留传入数组的精确字面量类型（比如不需要返回值精确匹配你传入的属性组合），直接把参数类型定义为Fruits[]即可，TS会直接基于Fruits类型提供补全：

type Fruits = {apples: number, melons?: number}

const addToBasket = (basket: Fruits[]) => {
  return basket
}

// 现在所有数组元素都会正常提示melons属性
addToBasket([{apples:1}, {apples:1 }])

方案2：调整泛型定义，保留泛型能力的同时修复补全 #

如果你确实需要使用泛型（比如要让返回值的类型和你传入的数组结构完全一致），可以把泛型的约束对象从数组改为单元素，TS就会优先参考Fruits的类型提供补全：

type Fruits = {apples: number, melons?: number}

const addToBasket = <T extends Fruits>(basket: T[]) => {
  return basket
}

// 自动补全正常，同时保留泛型的类型推断能力
addToBasket([{apples:1}, {apples:1 }])

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