类型为"[字符串，字符串]错误的参数？(在 Angular 和 d3 中)

Question

我正在将 d3(版本 4(与 Angular 5 一起使用，并且遇到了一些我找不到太多信息的错误。在我的名下，我有我的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。