Аргумент типа '[строка, строка] ошибка? (в угловых и d3)

Question

Я использую d3 (версия 4) с Angular 5 и сталкиваюсь с некоторыми ошибками, о которых я не могу найти много информации. В моем name.component.ts у меня есть код d3, и я получаю ошибки в определенных строках.

var x = d3.scaleTime()
  .rangeRound([0, width])
  .domain(d3.extent(this.data, function (d) { return d.date; }));

var y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain(d3.extent(this.data, function (d) { return d.ratio; }));

Для обеих этих строк я получаю красную линию под всем, что находится внутри домена (d3.extent (this.data, function (d) {return d.ratio;})).

Ошибка:

Argument of type '[string, string] | [undefined, undefined]' is not 
assignable to parameter of type '(number | Date | { valueOf(): number;}) []'.
Type '[string, string]' is not assignable to type '(number | Date | 
{valueOf(): number; })[]'.
Types of property 'push' are incompatible.
  Type '(...items: string[]) => number' is not assignable to type 
'(...items: (number | Date | { valueOf(): number; })[]) => number'.
    Types of parameters 'items' and 'items' are incompatible.
      Type 'number | Date | { valueOf(): number; }' is not assignable 
to type 'string'.
        Type 'number' is not assignable to type 'string'.

Я предполагаю, что есть столкновение в типе даты, но не могу понять это. Есть мысли?

Если это поможет, вот весь мой файл .ts:

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../data.service';
import { Http } from '@angular/http';
import * as d3 from 'd3';

@Component({
 selector: 'app-name',
 templateUrl: './name.component.html',
 styleUrls: ['./name.component.css']
})
export class Name implements OnInit {
  @Input() site1;

constructor(private _dataService: DataService, private http: Http) { }

date: Date;
dates: any;
value: Number;
eachobj: any;
data: any;
average: any;
values: any;
name: any;
ngOnInit() {

this.data = this.site1
this.dates = Object.keys(this.data.historical_data)
this.values = Object.values(this.data.historical_data)
this.values.forEach((obj, i) => obj.date = this.dates[i]);
this.data = this.values        


var svg = d3.selectAll("#watertemp_graph"),
  margin = { top: 20, right: 20, bottom: 30, left: 0 },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom
var parse = d3.timeParse("%Y-%m-%d")
var first = this.data[0].date
var last = this.data[(this.data.length) - 1].date

var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var baseValue = +this.data[0].avg_water_temp;
this.data.forEach(function (d) {
  d.date = parse(d.date);
  d.ratio = +(d.avg_water_temp / baseValue);
});

var x = d3.scaleTime()
  .rangeRound([0, width])
  .domain(d3.extent(this.data, function (d) { return d.date; }));
//ERROR

var y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain(d3.extent(this.data, function (d) { return d.ratio; }));
//ERROR

var line = d3.line()
  .x(function (d) { return x(d['date']); })
  .y(function (d) { return y(d['ratio']); });


// plot first and last dates on x axis
svg.append('g')
  .attr("class", "axis--x")
  .append("text")
  .attr("fill", "#000")
  .attr("x", (width / 2) - 80)
  .attr("y", height + 40)
  .text(first)
  .style("font-size", "09")
  .style("font-family", "Roboto")
  .style('fill', '#5a5a5a');
svg.append('g')
  .attr("class", "axis--x")
  .append("text")
  .attr("fill", "#000")
  .attr("x", (width / 2) + 45)
  .attr("y", height + 40)
  .text(last)
  .style("font-size", "09")
  .style("font-family", "Roboto")
  .style('fill', '#5a5a5a');


g.append("g")
  .call(d3.axisLeft(y))
  .remove();

g.append("path")
  .datum(this.data)
  .attr("fill", "none")
  .attr("stroke", "#26aae2")
  .attr("stroke-width", 1.5)
  .attr("d", line);

 }

}

Answer 1

d3.extent имеет две перегрузки, которые принимают два параметра :

export function extent<T>(array: ArrayLike<T>,
  accessor: (datum: T, index: number, array: ArrayLike<T>) => string | undefined | null):
  [string, string] | [undefined, undefined];

export function extent<T, U extends Numeric>(array: ArrayLike<T>,
  accessor: (datum: T, index: number, array: ArrayLike<T>) => U | undefined | null):
  [U, U] | [undefined, undefined];

TypeScript всегда разрешает вызов первой соответствующей перегрузки, и, поскольку this.data объявлен как тип any, TypeScript не может исключить, что первая перегрузка соответствует. Вот откуда приходит [string, string]. Если вы укажете более точный тип для this.data, первый вызов должен разрешиться до второй перегрузки, а возвращаемый тип должен появиться как ожидаемый [Date, Date] | [undefined, undefined]. Вам все еще понадобится утверждение типа, чтобы утверждать, что результатом будет [Date, Date], а не [undefined, undefined]; Я не знаю ни одного разумного способа сделать это с помощью сужения. Итак, ваш код будет выглядеть так:

var x = d3.scaleTime()
  .rangeRound([0, width])
  .domain(<[Date, Date]>d3.extent(this.data, function (d) { return d.date; }));

Учитывая, что вам нужно утверждение типа, вы можете оставить this.data как any, хотя в общем случае было бы целесообразно дать ему правильный тип. Аналогичные замечания относятся ко второму звонку на d3.extent.