TypeScript中大括号式方法声明的语法解析与疑问

嘿，这个问题问得很到位，我来帮你理清这个看起来有点“奇怪”的语法到底是怎么回事～

首先，这是什么类型？ #

{(id: number): void}是TypeScript里函数类型的一种旧写法，它和我们现在更常用的箭头函数形式(id: number) => void是完全等价的。

你之所以会觉得它像“包含函数的对象”，是因为它用了对象字面量的大括号语法，但实际上这只是早期TypeScript用来定义函数类型的一种方式，本质上就是在描述一个：

• 接收一个number类型参数id
• 没有返回值（void）
  的函数类型。

在接口里的作用 #

回到你的上下文：

interface ComponentProps { 
  add: {(id: number): void}; 
}

这里的add就是接口里的一个函数类型属性——它要求使用这个接口的地方，add必须是符合上述类型的函数，而不是一个包含函数的对象。

和你React组件用法的匹配 #

你在React组件里写的：

<Component add={(item) => {console.log(`Added item ${item}`);} } />

这个add属性完全符合接口要求：

• 箭头函数接收一个参数item，TypeScript会根据接口自动推断item是number类型
• 函数内部只有console.log，没有返回值，对应void类型
  所以完全可以通过类型检查。

补充：和单独定义Type的对比 #

你问“这是否相当于为add方法创建了一个type？”——其实可以理解为内联定义了函数类型，和提前抽成单独的type效果一样：

// 提前定义type的写法
type AddHandler = (id: number) => void;
interface ComponentProps {
  add: AddHandler;
}

这和你原来的接口写法功能完全一致，只是把类型抽离出来复用而已。

总结 #

这个写法只是TypeScript函数类型的一种旧语法，本质就是给add属性定义了函数类型，不是“包含函数的对象”。现在更推荐用箭头函数形式(id: number) => void，可读性会更好，但两种写法在类型层面没有区别。

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