面试题：复杂场景下 TypeScript 函数重载类型推断

Question

假设你正在开发一个图形绘制库，有一个 `drawShape` 函数。它有多个重载：当传入 `Circle` 类型对象（包含 `radius` 数字属性）时，绘制圆形；当传入 `Rectangle` 类型对象（包含 `width` 和 `height` 数字属性）时，绘制矩形。请实现这个函数的重载，并阐述在重载过程中，TypeScript 类型推断对于处理不同形状对象的参数和返回值类型的作用机制，以及可能遇到的类型兼容性问题如何解决。

Answer 1

实现 drawShape 函数重载

class Circle {
    constructor(public radius: number) {}
}

class Rectangle {
    constructor(public width: number, public height: number) {}
}

function drawShape(shape: Circle): void;
function drawShape(shape: Rectangle): void;
function drawShape(shape: Circle | Rectangle): void {
    if ('radius' in shape) {
        console.log(`绘制圆形，半径为: ${shape.radius}`);
    } else {
        console.log(`绘制矩形，宽为: ${shape.width}，高为: ${shape.height}`);
    }
}

TypeScript 类型推断作用机制

1. 参数类型推断：在调用 drawShape 函数时，TypeScript 会根据传入的实际参数类型来推断应该调用哪个重载版本。例如，如果传入 Circle 类型的对象，TypeScript 知道要调用接受 Circle 参数的重载；如果传入 Rectangle 类型的对象，则调用接受 Rectangle 参数的重载。这使得代码在调用函数时不需要显式指定类型，提高了代码的可读性和灵活性。
2. 返回值类型推断：在函数实现中，由于重载定义了返回值类型为 void，TypeScript 会确保函数体的返回值类型与之匹配。如果函数体试图返回其他类型的值，TypeScript 会抛出类型错误，保证了函数返回值类型的一致性。

可能遇到的类型兼容性问题及解决

1. 类型不匹配调用：如果调用 drawShape 函数时传入了既不是 Circle 也不是 Rectangle 类型的对象，TypeScript 会抛出类型错误。解决方法是确保传入的参数类型正确，或者可以通过联合类型 Circle | Rectangle 来接受多种可能的形状类型，并在函数体内进行类型检查。
2. 属性访问兼容性：在函数实现中，需要确保对不同形状对象属性的访问是安全的。例如，在判断 'radius' in shape 后，才能安全访问 shape.radius。如果直接访问未检查的属性，TypeScript 可能会报错。可以使用类型断言或类型保护来确保属性访问的安全性。
3. 函数重载顺序：在定义函数重载时，需要注意顺序。具体的重载（如接受 Circle 或 Rectangle 参数的重载）应该放在通用的重载（如接受 Circle | Rectangle 参数的重载）之前。否则，TypeScript 可能会优先匹配通用重载，导致具体重载无法生效。