React with TypeScript – assuring that at least one of type's keys if not null even if all of them are optional – Javascript

You can make a few changes in your types to help solve this.

Acknowledging that all of the keys in EventRecord of type string | null are related (and are the ones that need to be checked in the runtime code for a best match), you can define them in an array using a const assertion and then use that to define your type along with an optional time property. Then you can define another type that has the time property as non-optional.

That might look like this:

TS Playground

const eventRecordTimeKeys = ["indicated_time", "assumed_time", "eta"] as const;

type TimeKey = typeof eventRecordTimeKeys[number];

type EventRecord = Record<TimeKey, string | null> & {
  name: string;
  time?: Date;
};

/* EventRecord looks like this when expanded: {
  assumed_time: string | null;
  eta: string | null;
  indicated_time: string | null;
  name: string;
  time?: Date;
} */

type EventRecordWithTime = EventRecord & { time: Date };

Then, you can convert your existing filter function to a type guard, which has a predicate as its return type. This will help the compiler understand that if this function returns true, then the object element definitely has a time property that’s a Date. In the version shared in the code below, I’ve written the function to first check if the expected property exists and is of the correct type. If not, the array from above is used to check each time key and — if one exists, the time property is set and the function returns true early. If all are falsy, then function returns false.

I’ve also included a standard compare function to use with Array.prototype.sort() to sort by time (latest first):

TS Playground

function hasTime(event: EventRecord): event is EventRecordWithTime {
  if (event.time instanceof Date) return true;

  for (const key of eventRecordTimeKeys) {
    const value = event[key];
    if (value) {
      event.time = new Date(value);
      return true;
    }
  }

  return false;
}

function sortByLatestTime(a: { time: Date }, b: { time: Date }): number {
  return b.time.getTime() - a.time.getTime();
}

Putting that together in a reproducible example looks like this, and I’ve included the compiled JS below for you to run in a code snippet here:

TS Playground

const events: EventRecord[] = [
  { name: "a", assumed_time: null, eta: "2000-01-01T00:00:00.000Z", indicated_time: null },
  { name: "b", assumed_time: null, eta: null, indicated_time: null },
  { name: "c", assumed_time: null, eta: null, indicated_time: "2001-01-01T00:00:00.000Z" },
  { name: "d", assumed_time: null, eta: null, indicated_time: "2002-01-01T00:00:00.000Z" },
  { name: "e", assumed_time: "2003-01-01T00:00:00.000Z", eta: null, indicated_time: null },
];

const timelineEvents = events
  .filter(hasTime)
  .sort(sortByLatestTime);

timelineEvents.forEach(({ name, time }) => console.log(`${name}: ${time}`)); // Order: e d c a

Compiled JS snippet:

"use strict";
const eventRecordTimeKeys = ["indicated_time", "assumed_time", "eta"];
function hasTime(event) {
    if (event.time instanceof Date)
        return true;
    for (const key of eventRecordTimeKeys) {
        const value = event[key];
        if (value) {
            event.time = new Date(value);
            return true;
        }
    }
    return false;
}
function sortByLatestTime(a, b) {
    return b.time.getTime() - a.time.getTime();
}
const events = [
    { name: "a", assumed_time: null, eta: "2000-01-01T00:00:00.000Z", indicated_time: null },
    { name: "b", assumed_time: null, eta: null, indicated_time: null },
    { name: "c", assumed_time: null, eta: null, indicated_time: "2001-01-01T00:00:00.000Z" },
    { name: "d", assumed_time: null, eta: null, indicated_time: "2002-01-01T00:00:00.000Z" },
    { name: "e", assumed_time: "2003-01-01T00:00:00.000Z", eta: null, indicated_time: null },
];
const timelineEvents = events
    .filter(hasTime)
    .sort(sortByLatestTime);
timelineEvents.forEach(({ name, time }) => console.log(`${name}: ${time}`));

When used with a React component, you shouldn’t have any trouble:

TS Playground

declare function TimelineEntry (props: { name: string; time: Date; }): ReactElement;

function Component() {
  return timelineEvents.map(
    ({ name, time }) => <TimelineEntry key={name} name={name} time={time} />
  );
}

As far as the Ramda functional library is concerned: you don’t show what events is in your question, so I can’t reproduce your example. (Are you sure you’re using pipe correctly?) At any rate, Ramda isn’t strictly needed for this context, but you can adapt the TS techniques above to the Ramda functions if desired.