面试题：复杂场景下TypeScript元组类型的灵活运用

Question

假设你正在开发一个图形绘制库，有一个函数用于绘制不同类型的图形，图形信息通过元组传递。元组第一个元素是字符串，代表图形类型（'circle'表示圆形，'rectangle'表示矩形等），后面的元素根据图形类型而定，例如对于圆形，后续元素可能是圆心坐标(x, y)和半径；对于矩形，可能是左上角坐标(x1, y1)和右下角坐标(x2, y2)。请设计相关的TypeScript类型定义，并编写该绘制函数，同时要考虑到扩展性，即未来可能添加新的图形类型，保证代码有良好的类型安全和可维护性。

Answer 1

// 定义图形类型的联合类型
type ShapeType = 'circle' |'rectangle'; 

// 定义圆形的类型
type Circle = {
    type: 'circle';
    center: [number, number];
    radius: number;
};

// 定义矩形的类型
type Rectangle = {
    type:'rectangle';
    topLeft: [number, number];
    bottomRight: [number, number];
};

// 定义所有图形的联合类型
type Shape = Circle | Rectangle;

// 绘制函数
function drawShape(shape: Shape) {
    if (shape.type === 'circle') {
        const [x, y] = shape.center;
        console.log(`绘制圆形，圆心坐标: (${x}, ${y})，半径: ${shape.radius}`);
    } else if (shape.type ==='rectangle') {
        const [x1, y1] = shape.topLeft;
        const [x2, y2] = shape.bottomRight;
        console.log(`绘制矩形，左上角坐标: (${x1}, ${y1})，右下角坐标: (${x2}, ${y2})`);
    }
}

1. 类型定义：
   • 首先定义了ShapeType联合类型，包含目前已知的图形类型。
   • 然后分别为circle和rectangle定义了具体的类型Circle和Rectangle，其中包含了对应图形所需的信息。
   • 最后定义Shape联合类型，将Circle和Rectangle合并在一起。
2. 绘制函数：
   • drawShape函数接受一个Shape类型的参数shape。
   • 在函数内部，通过shape.type判断图形类型，然后进行相应的绘制操作（这里简单地使用console.log模拟绘制）。这种方式在未来添加新图形类型时，只需在ShapeType联合类型、对应的图形类型定义以及drawShape函数中添加新的判断逻辑即可，保证了类型安全和可维护性。