CODEWITHSUNDEEP
typescriptd3.js
aurumpotestasest
aurumpotestasest

Reputation: 796

Typing D3 line.defined in TypeScript

I'm drawing a line that might contain gaps using line.defined(), but I can't figure out how to type it properly. My graph displays as expected. Here's the code:

interface XYPoint {
  x: number;
  y: number;
}

interface XYPointNullable {
  x: number;
  y: number | null;
}

const lineIWantToDraw: XYPointNullable[] = [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: null }];

const createLine = line<XYPointNullable>() // <- type error here
  .defined(d => d.y !== null)
  .x(d => d.x)
  .y(d => d.y);

With the above code, I get an error Type 'null' is not assignable to type 'number'.

If I type the line fn as XYPoint, I get an error Argument of type 'XYPointNullable[]' is not assignable to parameter of type 'XYPoint[]' when calling the function.

Have I missed something obvious?

Thanks in advance for any suggestions!

Upvotes: 0

Views: 595

Answers (1)

Ruben Helsloot
Ruben Helsloot

Reputation: 13139

Since you know that d => d.y always returns a number, you can cast it as such:

interface XYPointNullable {
  x: number;
  y: number | null;
}

line<XYPointNullable>()
  .defined(d => d.y !== null)
  .x(d => d.x)
  .y(d => d.y as number);

This playground gave me no errors with that.

Upvotes: 1

Related Questions