Type issues with d3js

I'm getting the following error, when trying to build a graph with d3. It's a basic vertical bar chart with all data provided from the server side. The JS code is doing an Ajax call and then sending the data to d3.

TS2345: Argument of type '(this: BaseType | SVGRectElement, d: Analytics) => number | undefined' is not assignable to parameter of type 'string | number | boolean | readonly (string | number)[] | ValueFn<BaseType | SVGRectElement, Analytics, string | number | boolean | readonly (string | number)[] | null> | null'.
  Type '(this: BaseType | SVGRectElement, d: Analytics) => number | undefined' is not assignable to type 'ValueFn<BaseType | SVGRectElement, Analytics, string | number | boolean | readonly (string | number)[] | null>'.
    Type 'number | undefined' is not assignable to type 'string | number | boolean | readonly (string | number)[] | null'.
      Type 'undefined' is not assignable to type 'string | number | boolean | readonly (string | number)[] | null'.
    78 |       .attr("class", "bar")
    79 |       // .attr("x", (d) => x_scaler(d, x_scale))
  > 80 |       .attr("x", (d) => x_scale(d.period_ended_at))
       |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    81 |       .attr("y", (d) => y_scale(d.price_cents))
    82 |       .attr("width", x_scale.bandwidth())
    83 |       .attr("height", (d) => height - y_scale(d.price_cents));

Here is the full code:

type Analytics = {
  id: number;
  period_ended_at: string;
  price_cents: number;
  fee_cents: number;
};

const data: Analytics[] = await get_data() // This is properly return a JSON that is being casted to `Analytics`. I've checked this in the console and this is working.

const width = 600
const height = 400

const x_scale = d3.scaleBand().range([0, width]).padding(0.1);
const y_scale = d3.scaleLinear().range([height, 0]);

const svg = d3.select(".chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "1px solid black")

x_scale.domain(data.map((d: Analytics) => d.period_ended_at));
y_scale.domain([0, d3.max(data, (d: any) => d.price_cents)]);

svg
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("class", "bar")
  .attr("x", (d) => x_scale(d.period_ended_at))
  .attr("y", (d) => y_scale(d.price_cents))
  .attr("width", x_scale.bandwidth())
  .attr("height", (d) => height - y_scale(d.price_cents));

Any help would be greatly appreciated. Thanks!

The error very verbosely explains that the return type of x_scale() is number | undefined. Because attr("x", value) expects number not undefined, the type checker reports that as an error. This happens when you enable strictNullChecks in your tsconfig.json.

You can force the type checker to assume the value will always be non-nullish by appending ! to the expression whose type you want to override:

.attr("x", (d) => x_scale(d.period_ended_at)!)
//                                          ^ this asserts that the expression
//                                            is not undefined

Technically, this removes undefined from the union type number | undefined which then satisfies the type required for the attr("x", value) call.

Note that this does not change the behaviour of the code itself, it just tells the typechecker to trust the author instead of its own type inferrence. If the function were to return undefined, your code would still break since the ! postfix operator is removed when compiling to JS.

You can read more about this here:

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-