React中如何为指定JS代码编写正确TypeScript类型 获得正确调用提示

我们需要定义混合类型描述stuff的特征：它本身是可调用的无参函数，同时挂载了名为first的无参方法，二者返回值都是字符串。在TS中可以通过「函数签名+交叉类型」实现这类复合类型的定义。

完整代码示例：

import { useCallback } from 'react'

// 定义复合类型：无参返回字符串的函数 + 带first方法
type Stuff = (() => string) & {
  first: () => string
}

const stuff = useCallback((): Stuff => { 
  function first() { 
    return "firstStaff"
  }
  function major() { 
    return "majorStaff"
  }
  
  // 给major挂载first方法，类型断言避免TS属性不存在的报错
  const typedMajor = major as Stuff
  typedMajor.first = first
  
  return typedMajor
})()

类型验证效果：

• 调用stuff()时，TS会正确提示返回值为string类型
• 调用stuff.first()时，TS会正确识别first方法的类型，无类型报错

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