React typescript 条件渲染类型日期

Question

I'm trying to adapt the example from MaterialUI Table Fixed header for my project. I have a Date field. That's the problem.

I get the error message: TS2367: This condition will always return 'false' since the types 'string' and 'DateConstructor' have no overlap.

<TableRow hover role="checkbox" tabIndex={-1} key={row.RECORDNO}>
    {columns.map((column) =>{
        const value = row[column.id];

        return(
            <TableCell key={column.id} align={column.align}>
                {column.formatFld && typeof value === Date ? column.formatFld(value) : value}
                                     {/*^^^^^^^^^^^^^^^^^^^^^^ Error*/}
            </TableCell>
        );
    })}
</TableRow>

Does anyone have any idea how I can work around this?

Answer 1

You can't check whether a value is a date this way:

value = new Date()
console.log(typeof value) // "object" 

do it like this:

console.log(value.constructor.name === "Date") // true

Answer 2

Actually, the typeof operator only tells apart primitive types ( string , number , bigint , boolean , symbol , undefined , object and function ). To check if a variable is an instance of a class use the instanceof operator.

<TableRow hover role="checkbox" tabIndex={-1} key={row.RECORDNO}>
  {columns.map((column) => {
    const value = row[column.id];
  
    return (
      <TableCell key={column.id} align={column.align}>
        {column.formatFld && value instanceof Date ? column.formatFld(value) : value}
      </TableCell>
    );
  })}
</TableRow>

Answer 3

This is my interface and this is how the data is output.

export interface IAnwesenheit {
    DATUM: Date,
    NAMEN: string,
    VORNAME: string,
    FIRMA: string,
    PERSONALID: number,
    FIRMAID: number,
    STARTZEIT: Date,
    ENDEZEIT: Date,
    BARCODEIDENT: string,
    BAUSTELLE: string,
    BAUSTELLEID: number,
    RECORDNO: number,
}

BARCODEIDENT: "Z"
BAUSTELLE: "München"
BAUSTELLEID: 4
DATUM: "2017-06-12T00:00:00.000+02:00"
ENDEZEIT: "1899-12-30T18:09:19.000+01:00"
FIRMA: "XY GmbH"
FIRMAID: 3
NAMEN: "Firma 1"
PERSONALID: 7
RECORDNO: 1
STARTZEIT: "1899-12-30T07:15:07.000+01:00"
VORNAME: "Person"

Answer 4

Many thanks, I implemented it now and it works.

<TableRow hover role="checkbox" tabIndex={-1} key={row.RECORDNO}>
    {columns.map((column) => {

        const value = row[column.id];

        return (
            <TableCell key={column.id} align={column.align}>
                {column.formatFld && (value as Date) ? column.formatFld(new Date(value as Date)) : value}
            </TableCell>
        );
    })}
</TableRow>