typescript - Kiểu 'string' không thể gán cho kiểu 'number' khi tạo thang màu sử dụng d3.scaleQuantile

Tôi đang cố gắng tái hiện bản đồ nhiệt d3 này trong một ứng dụng React (với TypeScript). Tuy nhiên, đoạn mã sau đây khiến tôi đau đầu:

 const colorScale = d3.scaleQuantile()
     .domain([0, buckets - 1, d3.max(data, (d: any) => parseInt(d.value))])
     .range(colors);

colors được gạch chân bằng màu đỏ, cho thấy lỗi sau:

Kiểu 'string' không thể gán cho kiểu 'number'

Tôi tự hỏi làm thế nào tôi có thể giảm thiểu vấn đề này.

Câu trả lời #1

Có một số khác biệt nhỏ về câu trả lời tùy thuộc vào phiên bản của mô-đun thang đo đang sử dụng. Tuy nhiên, giải pháp chính không bị ảnh hưởng bởi điều đó và áp dụng cho tất cả các phiên bản.

D3 v4 được đóng gói sẵn

Ví dụ bạn liên kết sử dụng D3 v4 phụ thuộc vào module d3-scale v1.

Nếu bạn nhìn vào các định nghĩa kiểu cho d3.scaleQuantile() bạn sẽ nhận thấy có hai định nghĩa cho việc tạo nó:

/**
 * Constructs a new quantile scale with an empty domain and an empty range.
 * The quantile scale is invalid until both a domain and range are specified.
 */
export function scaleQuantile(): ScaleQuantile<number>;

/**
 * Constructs a new quantile scale with an empty domain and an empty range.
 * The quantile scale is invalid until both a domain and range are specified.
 *
 * The generic corresponds to the data type of range elements.
 */
export function scaleQuantile<Range>(): ScaleQuantile<Range>;

Bởi vì bạn đã không chỉ định tham số kiểu tổng quát Range, trình biên dịch mặc định sử dụng định nghĩa đầu tiên, suy luận kiểu của phạm vi của bạn là number và, do đó, xảy ra lỗi cho phạm vi của bạn chứa các chuỗi.

Điều này có thể dễ dàng được giải quyết, tuy nhiên, bằng cách chỉ rõ kiểu của phạm vi thang đo, cụ thể là string:

 const colorScale = d3.scaleQuantile<string>()  // Specify the type of the scale's range: <string>.
     .domain([0, buckets - 1, d3.max(data, (d: any) => parseInt(d.value))])
     .range(colors);

D3 v5 được đóng gói sẵn

D3 v5 sử dụng phiên bản 2 của module d3-scale với chỉ những thay đổi nhỏ đối với định nghĩa loại của scale.

d3-scale độc lập

Hãy cẩn thận khi sử dụng định nghĩa kiểu cho d3-scale cho module độc lập vì chúng được tạo ra cho phiên bản 2.1.2 của module. Tại thời điểm viết bài, phiên bản độc lập mới nhất là 3.1.0, có những thay đổi đáng kể đối với API! Thật tiếc, không có định nghĩa kiểu nào sẵn có cho phiên bản đó.