返回typescript中Map数组的类型

yxyvkwin  于 2022-11-26  发布在  TypeScript
关注(0)|答案(3)|浏览(161)

我有这个功能

export const handleSortableColumns = (headerKeys: string[], sortKeys: object): string[] => {
  if (!headerKeys) return [];

  return headerKeys.map((key: string): any => sortKeys[key] || null);
};

所以headerKeys参数采用list of stringsortKeys参数应该采用object,但是我认为把对象类型放在这里是错误的,而且我不能定义类型或接口,因为每次都是不同的属性。我应该指定泛型类型吗?我该怎么做呢?另外,返回类型将是一个包含空值的字符串列表,所以什么应该是返回类型+禁止使用任何类型

ldioqlga

ldioqlga1#

对于sortKeys,您可以这样做

interface ISortKeys {
  [key: string]: string
}

对于返回类型,可以使用

(string|null)[]
zlwx9yxi

zlwx9yxi2#

我把sortKeysheaderKeys交换了。这有助于可用性,因为类型检查器立即知道你在操作什么对象。我还把headerKeys变元了,但是如果你喜欢的话,你可以把它还原成一个常规数组。

const handleSortableColumns = <T>(sortKeys: T, ...headerKeys: (keyof T & string)[]): (string | null)[] => {
    if (!headerKeys) return [];
    const result = headerKeys.map(key => sortKeys[key] || null);
    return result as (string | null)[];
}

handleSortableColumns({ a: '1', b: 2 }, 'a', 'X');

现在是一个类型错误。但这并不能使您免于

handleSortableColumns({ a: '1', b: 2 }, 'a', 'b');

包括更严格的返回类型检查很快就会变成一个不可读的类型汤。我建议使用运行时检查,filterthrow

yb3bgrhw

yb3bgrhw3#

你可以使用generic类型参数来推断输入值的类型,然后使用这些泛型来创建一个数组返回类型,它表示对象中的值的子集,这些值可以由输入数组中的值(或null)来索引。
TSPlayground

function handleSortableColumns <
  Keys extends readonly string[],
  ValueMap extends Record<string, unknown>,
>(headerKeys: Keys, valueMap: ValueMap): (ValueMap[Extract<keyof ValueMap, Keys[number]>] | null)[] {
  return headerKeys.map(
    key => (valueMap[key] ?? null) as ValueMap[Extract<keyof ValueMap, Keys[number]>] | null
  );
}

const keys = ['a', 'b', 'c'] as const;

const map = {
  a: 1,
  c: false,
  d: 'hello world',
};

const result = handleSortableColumns(keys, map);
    //^? const result: (number | boolean | null)[]

console.log(result); // [1, null, false]

从TS Playground编译的JS:

"use strict";
function handleSortableColumns(headerKeys, valueMap) {
    return headerKeys.map(key => (valueMap[key] ?? null));
}
const keys = ['a', 'b', 'c'];
const map = {
    a: 1,
    c: false,
    d: 'hello world',
};
const result = handleSortableColumns(keys, map);
//^?
console.log(result); // [1, null, false]

相关问题