Typescript如何无参数合并仅字符串不同的相似按钮点击函数？

你提到的高阶函数思路完全可行，仅需修正少量语法问题、补充TS类型约束即可达到需求，最终生成的onClickLoginA、onClickLoginB均为无参函数，绑定到按钮时不需要传递任何参数。

完整实现代码 #

// 限定合法的登录渠道取值，避免传入非法值
type LoginTarget = 'A' | 'B'

/**
 * 生成登录点击处理函数
 * @param target 登录渠道标识
 */
function createLoginHandler(target: LoginTarget): () => void {
  return () => {
    // 注意TS模板字符串插值需要加$符号
    const loginURL = `http://.../.../${target}`
    window.open(loginURL, `Login with ${target}`)
  }
}

// 生成两个无参点击函数，直接绑定到按钮的点击事件即可
const onClickLoginA = createLoginHandler('A')
const onClickLoginB = createLoginHandler('B')

补充说明 #

• 该方案的维护成本极低，后续需要新增C、D等其他登录渠道时，仅需新增一行生成代码即可，不需要重复编写逻辑
• 如果你希望更贴近C++模板的静态泛型写法，也可以用TS泛型实现，运行时效果和上述代码完全一致：

type LoginTarget = 'A' | 'B'

function createLoginHandler<T extends LoginTarget>(target: T): () => void {
  return () => {
    const loginURL = `http://.../.../${target}`
    window.open(loginURL, `Login with ${target}`)
  }
}

const onClickLoginA = createLoginHandler<'A'>('A')
const onClickLoginB = createLoginHandler<'B'>('B')

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