面试题：TypeScript 中如何为数据可视化库扩展类型

Question

假设你正在使用一个简单的数据可视化库，它有一个函数`drawChart(data: any[])`用于绘制图表，但`data`的类型过于宽泛。请用 TypeScript 为这个函数的`data`参数扩展一个更具体的类型，要求数据数组中的每个元素是一个包含`name`（字符串类型）和`value`（数字类型）的对象，并且说明这样做的好处。

Answer 1

1. 扩展类型：

   type ChartData = {
       name: string;
       value: number;
   }[];
   
   function drawChart(data: ChartData) {
       // 函数具体实现，这里假设只是简单打印数据
       console.log(data);
   }
   

2. 好处：
   • 类型安全：在调用drawChart函数时，TypeScript 编译器可以在编译阶段检查传入的data是否符合预期的结构。如果传入的数据不符合ChartData类型，编译器会报错，有助于在开发过程中尽早发现错误，而不是在运行时才暴露问题。
   • 代码可读性：明确的类型定义使得代码阅读者（包括自己未来维护代码时）能清楚地知道drawChart函数期望的数据结构，提高了代码的可理解性和可维护性。
   • 智能提示：在使用支持 TypeScript 的编辑器中，当编写调用drawChart函数的代码时，编辑器可以根据ChartData类型提供智能提示，方便开发者编写代码，提高开发效率。