如何让TypeScript将createFruit返回值推断为'apple'字符串字面量类型？

原代码问题 #

当前代码中，fruit被推断为string类型，无法保留第一个元素的具体字面量类型：

const createFruit = <T extends string[]>(fruits: T): typeof fruits[0] => fruits[0]

const fruit = createFruit(['apple', 'orange']) // fruit is of type `string`

可行实现方案 #

方案1：调用时使用as const断言

通过as const强制TypeScript将数组解析为只读字面量数组，保留每个元素的具体类型：

const createFruit = <T extends string[]>(fruits: T): typeof fruits[0] => fruits[0]

const fruit = createFruit(['apple', 'orange'] as const) // fruit类型为'apple'

方案2：使用const泛型（TypeScript 5.0+）

在泛型前添加const关键字，让TypeScript自动推断数组元素的字面量类型，无需手动添加断言：

const createFruit = <const T extends string[]>(fruits: T): T[0] => fruits[0]

const fruit = createFruit(['apple', 'orange']) // fruit类型为'apple'

方案3：约束泛型为只读字面量数组

修改泛型约束为readonly string[]，配合as const使用，同样能得到精确的字面量类型：

const createFruit = <T extends readonly string[]>(fruits: T): T[0] => fruits[0]

const fruit = createFruit(['apple', 'orange'] as const) // fruit类型为'apple'

核心原理 #

TypeScript默认会将数组元素的字面量类型拓宽为基础类型（比如'apple'自动转为string），通过as const断言或const泛型，可以强制TypeScript保留原始的字面量类型信息，从而让返回值的类型精确到具体的字符串字面量。

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