Duplicated here: https://codesandbox.io/s/distracted-sea-uu3l8?file=/src/BoxBox.tsx

I've stripped this down and I think the error is close to what I'm getting with the full blown code. I'm using the mui sort example but I'm getting an error when the generic getComparator is called rows.slice().sort(getComparator(order, orderBy)).

Error: Argument of type '(a: { [x: string]: string | number | Date; }, b: { [x: string]: string | number | Date; }) => number' is not assignable to parameter of type '(a: Bob, b: Bob) => number'. Types of parameters 'a' and 'a' are incompatible. Type 'Bob' is not assignable to type '{ [x: string]: string | number | Date; }'. Index signature is missing in type 'Bob'.ts(2345)

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

type Order = 'asc' | 'desc';

function getComparator<Key extends keyof any>(
  order: Order,
  orderBy: Key,
): (
    a: { [key in Key]: number | string | Date },
    b: { [key in Key]: number | string | Date },
  ) => number {
  return order === 'desc'
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

CodePudding user response：

of course it is not going to let you the problem is hard to see in your code ...with all respect please take it as a constructive criticism...

the Error is because getComparator gets two parameters of type { [key in Key]: number | string | Date } but on the other hand descendingComparator receives two parameters of type T in other words T !== { [key in Key]: number | string | Date }

import React, { FC, useState } from "react";
import "./styles.css";
import Box from "@material-ui/core/Box";
import Paper from "@material-ui/core/Paper";

function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

type Order = "asc" | "desc";

function getComparator<Key extends keyof Bob>(
  order: Order,
  orderBy: Key
): (a: Bob, b: Bob) => number {
  return order === "desc"
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

interface Bob {
  aDate: Date;
  bDate: Date;
  status: string;
  cDate: Date;
  cost: number;
  costId: number;
  personId: number | null;
  itemAmount: number | null;
  notes: string;
}

function createData(
  aDate: Date,
  bDate: Date,
  status: string,
  cDate: Date,
  cost: number,
  costId: number,
  personId: number | null,
  itemAmount: number | null,
  notes: string
): Bob {
  return {
    aDate,
    bDate,
    status,
    cDate,
    cost,
    costId,
    personId,
    itemAmount,
    notes
  };
}

const stuff = [
  createData(
    new Date("2018-05-01"),
    new Date("2018-05-31"),
    "rfds",
    new Date("2018-05-01"),
    20.4,
    24703,
    null,
    0,
    "fdls;akj"
  ),
  createData(
    new Date("2018-05-01"),
    new Date("2018-05-31"),
    "gfaer",
    new Date("2018-05-01"),
    20.4,
    24703,
    null,
    0,
    "fdls;akj"
  )
];

const BobBox: FC = () => {
  const [orderBy, setOrderBy] = useState<keyof Bob>("Status");
  const [order, setOrder] = useState<Order>("asc");

  return (
    <Box component={Paper}>
      {stuff
        .slice()
        .sort(getComparator(order, orderBy))
        .map((item, i) => (
          <Box key={i}>{item.status}</Box>
        ))}
    </Box>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <BobBox />
    </div>
  );
}