d3.js - Typescript + React + D3v4: `Objekt ist möglicherweise 'undefined'` Fehler bei d3 scaleBand

Wie man den Object is possibly 'undefined'-Fehler behebt, der bei 'yScale' auftritt

interface IData {
  id: string;
  phone_number: string,
}
const data : IData[]
const devices = data.map((d) => d.phone_number)
const yScale = d3.scaleBand()
  .range([0, 30 * devices.length])
  .domain(devices)

const yAccessor = (d: string) => yScale(d)

Ich denke, es tritt auf, weil TypeScript glaubt, dass d3s scaleBand undefined zurückgeben wird, da die Variable 'devices' ein leeres Array ist. Wenn ich in meiner IDE über 'devices' schwebe, zeigt es 'let devices: string[]'. Allerdings ist 'devices' in seinem Anfangszustand leer (weil noch keine Suche durchgeführt wurde). Dieser Fehler würde nicht auftreten, wenn 'devices' bereits eine Liste von Elementen enthält.

Hier sind die Typdefinitionen von d3-scale

export interface ScaleBand<Domain extends { toString(): string }> {
    /**
     * Given a value in the input domain, returns the start of the corresponding band derived from the output range.
     * If the given value is not in the scale’s domain, returns undefined.
     *
     * @param x  A value from the domain.
     */
    (x: Domain): number | undefined;
...
}

Antwort #1

Da das data ein leeres Array sein könnte, könnten Sie eine Überprüfung durchführen, bevor yScale aufgerufen wird, um sicherzustellen, dass data nicht leer ist.

if (!data.length) {
  return;
}
const devices = data.map((d) => d.phone_number)
const yScale = d3.scaleBand()
  .range([0, 30 * devices.length])
  .domain(devices)

Dies wird innerhalb Ihres Hooks/Ihrer Methode zu einer vorzeitigen Rückkehr führen, wenn die Daten ein leeres Array sind.

Antwort #2

Eine mögliche Lösung besteht darin, undefinierte/null Werte in den TypeScript-Compiler-Einstellungen wie in tsconfig zuzulassen. Allerdings bin ich mir nicht sicher, ob das empfohlen wird oder nicht.