我正在try 修改我为一个允许对其列进行排序的表找到的一些代码.该示例仅适用于字符串值,我正在try 对其进行修改,以便我的表可以在某些列中包含数字,同时仍然保留排序功能.我正在使用的示例可以在这里找到https://github.com/mantinedev/ui.mantine.dev/blob/master/lib/TableSort/TableSort.tsx

这是我目前使用的排序函数.我曾try 使用If语句和typeof来更改排序方式,但我对打字非常陌生,似乎无法理解它.

function sortData(
data: dataInterface[],
payload: { sortBy: keyof dataInterface | null; reversed: boolean; search: string }) {
const { sortBy } = payload;

if (!sortBy) {
    return filterData(data, payload.search);
}

return filterData(
    [...data].sort((a, b) => {
        if (payload.reversed) {
                return b[sortBy].localeCompare(a[sortBy]);
        }

        return a[sortBy].localeCompare(b[sortBy]);
    }),
    payload.search
);
}

FilterData函数:

function filterData(data: dataInterface[], search: string) {
const query = search.toLowerCase().trim();
return data.filter((item) =>
    keys(data[0]).some((key) => item[key].toLowerCase().includes(query))
);
}

我的数据接口看起来像这样:

interface dataInterface {
guid: string;
name: string;
set: string;
quantity: string;
price: number;
}

推荐答案

您可以编写一个自定义比较器(sort()期望的回调类型),它接受stringnumber的值.

如果两个输入都是string,则使用现有的localeCompare()方法,其行为类似于(a, b) => a.localeCompare(b).如果两个输入都是numbers,则使用标准数字(a, b) => a - b.

唯一的问题是,如果一个输入是number,另一个是string,该怎么做.在实践中,根据您的定义,这种情况不应该发生.如果你真的想要,你可以经历相当痛苦的练习,让文字脚本理解这一点,但这是太多的工作,几乎没有好处.一种更简单的方法是,在这种意想不到的情况下 Select 一些合理的行为.所谓"合理",我的意思是做一些不违反比较器规则的简单事情(即,比较器必须是纯粹稳定的、自反的、反对称的和可传递的;有关详细信息,请参阅MDN docs for sort())

例如,您可以将所有string放在所有number之前.这给了我们这个比较器:

const strOrNumCmp = (a: string | number, b: string | number) =>
  (typeof a === "string") ?
    (typeof b === "string") ? a.localeCompare(b) : -1 :
    (typeof b === "string") ? 1 : a - b;

const v: (string | number)[] = [1, "x", 2, "y", 0, "a", -1, "b"];
v.sort(strOrNumCmp);
console.log(v);
// ["a", "b", "x", "y", -1, 0, 1, 2] 

看上go 很合理. 再说一次,你做什么真的不重要,只要它是一致的.


无论如何,您可以编写sortData()来呼叫a[key]b[key]strOrNumCp,如下所示:

function sortData(data: DataInterface[], key: keyof DataInterface) {
  return data.sort((a, b) => strOrNumCmp(a[key], b[key]));
}

当然,你也可以根据需要定制它(有条件地颠倒顺序、过滤等).

Playground link to code

Typescript相关问答推荐

如何将http上下文附加到angular中翻译模块发送的请求

使用FormArray在Angular中添加排序

如何在TypeScrip面向对象程序设计中用方法/属性有条件地扩展类

rxjs forkJoin在错误后不会停止后续请求

TypeScrip 5.3和5.4-对`Readonly<;[...number[],字符串]>;`的测试版处理:有什么变化?

为什么我的条件类型不能像我预期的那样工作?

分解对象时出现打字错误

如何在深度嵌套的Reaction路由对象中隐藏父级?

有没有可能产生输出T,它在视觉上省略了T中的一些键?

如何在NX工作区项目.json中设置类似angular.json的两个项目构建配置?

如何将TS泛型用于react-hook-form接口?

是否有可能避免此泛型函数体中的类型断言?

基于泛型的条件接口键

在Cypress中,您能找到表格中具有特定文本的第一行吗?

顶点堆叠的图表条形图未在正确的x轴上显示

更漂亮的格式数组<;T>;到T[]

如何将对象的字符串文字属性用作同一对象中的键类型

如何使用 AWS CDK 扩展默认 ALB 控制器策略?

覆盖高阶组件中的 prop 时的泛型推理

如何确定剧作家中给定定位器的值?