是否可以在TypeScript中对元组使用Array.prototype.map(),同时在返回类型中保留元组长度



我希望,如果在TypeScript中对长度为N的元组使用内置的map函数,那么返回类型也将是长度为N(根据传递给map的函数,元素的类型可能不同(的元组。相反,返回类型只是回调函数返回的任何类型的标准可变长度数组。元组的长度丢失。我写了一个自定义函数,可以随心所欲,但我想知道是否有更好的方法可以避开我。我正在努力提高对TypeScript的理解。我在代码下面包含了一个TypeScript游乐场链接(使用相同的代码(。谢谢你的帮助!

const nums = [1, 2, 3] as const;
// result1 type is string[]
const result1 = nums.map((num) => num.toString());
// so this won't compile
const result2: [string, string, string] = nums.map((num) => num.toString());
// a type assertion would work, but I'd rather not use one...
const result3 = nums.map((num) => num.toString()) as [string, string, string];
// ...because this also compiles yet the type of result4 doesn't match its value
const result4 = nums.map((num) => num.toString()) as [string, boolean, number, symbol, string, number];
// result5 type is [string, string, string]
const result5 = map(nums, (num) => num.toString());
// custom map function that yields the correct return type when used on a tuple
function map<A extends readonly [...any[]], B>(values: A, func: (value: A[number]) => B): { [K in keyof A]: B } {
return values.map(func) as unknown as { [K in keyof A]: B };
}

请参阅:TypeScript Playground

请尝试下一步:


type A = readonly [1, 2, 3]
const nums: A = [1, 2, 3];
const toStr = <T extends number>(num: T) => num.toString() as `${T}`
const result2 = nums.map(toStr); // ("3" | "1" | "2")[]

我认为这不是最好的解决方案,因为你仍然有('3'|'2'|'1'([],而不是['1','2','3'],但这是向前迈出的一步

我很乐意在这里看到其他解决方案。非常有趣的问题(

仅适用于T.S 4.1

更新

有可能通过一些重载和可变元组类型来创建您想要的类型

type Json =
| string
| number
| boolean
| { [prop: string]: Json }
| Array<Json>
type CustomMap<T extends ReadonlyArray<Json>> = {
[Index in keyof T]: { elem: T[Index] }
}
function map<Elem extends Json, List extends Elem[], Return>(list: [...List], callback: (value: Elem) => Return): CustomMap<List>
function map<Elem extends Json>(list: Elem[], callback: (elem: Elem) => unknown) {
return list.map(callback)
}
// const result2: [{
//     elem: 1;
// }, {
//     elem: 2;
// }, {
//     elem: 3;
// }]
const result2 = map([1, 2, 3], elem => ({ elem }));

游乐场

最新更新