面试题：TypeScript 数据可视化库类型扩展中的泛型应用

设计泛型结构：
- 首先定义一个泛型类型ChartData，它表示图表数据的通用类型。不同类型的图表数据结构可以基于这个泛型来定义。
```
type ChartData<T> = T[];
```

在组件函数和属性中使用泛型：

假设组件有一个函数renderChart用于渲染图表，接收图表数据作为参数。

interface ChartComponent<T> {
    data: ChartData<T>;
    renderChart(): void;
}
class BarChart implements ChartComponent<{ category: string; value: number }> {
    data: ChartData<{ category: string; value: number }>;
    constructor(data: ChartData<{ category: string; value: number }>) {
        this.data = data;
    }
    renderChart() {
        // 这里实现柱状图的渲染逻辑
        console.log('Rendering bar chart with data:', this.data);
    }
}
class LineChart implements ChartComponent<{ x: number; y: number }> {
    data: ChartData<{ x: number; y: number }>;
    constructor(data: ChartData<{ x: number; y: number }>) {
        this.data = data;
    }
    renderChart() {
        // 这里实现折线图的渲染逻辑
        console.log('Rendering line chart with data:', this.data);
    }
}

在上述代码中：
- ChartComponent接口使用了泛型T，其中data属性的类型为ChartData<T>，即不同结构的数据数组。
- BarChart类实现了ChartComponent<{ category: string; value: number }>接口，明确了其data属性的结构为{ category: string; value: number }类型的数组。
- LineChart类实现了ChartComponent<{ x: number; y: number }>接口，明确了其data属性的结构为{ x: number; y: number }类型的数组。
这样在使用这些组件时，TypeScript 可以进行正确的类型检查。例如：

const barData: ChartData<{ category: string; value: number }> = [
    { category: 'A', value: 10 },
    { category: 'B', value: 20 }
];
const barChart = new BarChart(barData);
barChart.renderChart();
const lineData: ChartData<{ x: number; y: number }> = [
    { x: 1, y: 10 },
    { x: 2, y: 20 }
];
const lineChart = new LineChart(lineData);
lineChart.renderChart();

通过上述设计，利用 TypeScript 的泛型实现了一个类型系统，使得数据可视化库组件能够接收不同结构的数据并进行正确的类型检查。

面试题：TypeScript 数据可视化库类型扩展中的泛型应用

知识考点

面试题答案