如何在TypeScript中定义实现兼具重载与子方法的message函数

要实现一个既可以直接调用、支持重载，又能挂载confirm这类子方法的函数，核心是让TypeScript同时识别它的函数身份和对象属性。你之前的两种尝试都有局限：类必须通过new实例化才能调用实例方法，直接定义的类型则没有正确关联函数与属性的关系。

正确实现方式 #

以下两种方案都能满足需求：

方案1：接口描述函数类型+属性，结合类型断言实现

// 1. 定义接口：同时声明函数重载签名和子方法
interface MessageFn {
  // 函数重载的两种调用形式
  (msg: string): void;
  (msg: string, type: 'success' | 'error' | 'info'): void;
  // 挂载的子方法
  confirm: (msg: string) => void;
}

// 2. 实现函数主体，通过类型断言匹配接口
const message = ((msg: string, type?: 'success' | 'error' | 'info') => {
  // 这里编写消息展示逻辑
  console.log(`消息：${msg}，类型：${type ?? '默认'}`);
}) as MessageFn;

// 3. 实现子方法
message.confirm = (msg: string) => {
  // 这里编写确认框逻辑
  console.log(`确认提示：${msg}`);
};

// 调用测试
message('普通通知');
message('操作成功', 'success');
message.confirm('确定要删除这条数据吗？');

方案2：函数声明+接口合并

如果偏好函数声明的写法，可以用接口合并扩展函数的属性：

// 1. 声明函数重载签名
function message(msg: string): void;
function message(msg: string, type: 'success' | 'error' | 'info'): void;

// 2. 实现函数主体
function message(msg: string, type?: 'success' | 'error' | 'info') {
  console.log(`消息：${msg}，类型：${type ?? '默认'}`);
}

// 3. 接口合并：为message函数添加属性定义
interface message {
  confirm: (msg: string) => void;
}

// 4. 实现子方法
message.confirm = function(msg: string) {
  console.log(`确认提示：${msg}`);
};

// 调用测试
message('系统通知');
message('操作失败', 'error');
message.confirm('确定要退出登录吗？');

之前尝试失败的原因 #

• 类定义问题：类本身是构造函数，必须通过new创建实例才能调用实例方法；静态方法属于类本身，但类不能直接作为普通函数调用，这不是类的常规用法。
• 直接类型定义问题：你定义的Message类型中，message是一个对象方法，而你试图把函数赋值给message变量，变量类型应该是“函数+属性”的组合，而非包含message方法的对象，类型不匹配导致报错。

内容的提问来源于stack exchange，提问作者Autumn