TypeScript中Readonly包裹的Props类型如何工作？void返回值的意义是什么？

咱们一步步把这段代码拆解开，搞清楚每个部分的作用和背后的原理：

1. Readonly<T>：让对象属性只读 #

Readonly<>是TypeScript内置的工具类型，它的作用很简单：接收一个对象类型T，返回一个新的对象类型，其中T的所有属性都被标记为readonly（只读）。

放到你的例子里：

type Props = Readonly<{ onAnythingChange: (query: string) => void; }>

相当于手动定义了：

type Props = {
  readonly onAnythingChange: (query: string) => void;
}

这意味着，当你创建一个Props类型的对象后，你不能重新赋值onAnythingChange这个属性。比如下面的代码会报错：

const props: Props = {
  onAnythingChange: (query) => console.log(query)
};

// 错误：无法分配到 "onAnythingChange" ，因为它是只读属性。
props.onAnythingChange = () => {};

这个设计通常用于组件Props（比如React组件），确保父组件传递的回调不会被子组件意外修改，保证数据流向的单向性。

2. (query: string) => void：函数类型与void的意义 #

这部分是定义onAnythingChange的类型：它是一个回调函数，接收一个string类型的参数query，返回值类型是void。

重点说下这里的void：
在TypeScript的函数类型中，void表示这个函数不应该有返回值，或者说调用该函数的代码不依赖它的返回值。

• 如果你实现这个函数时，不小心返回了一个值（比如return 'hello'），TypeScript不会报错，但调用者无法使用这个返回值——比如下面的代码是无效的：

  const props: Props = {
    onAnythingChange: (query) => {
      console.log(query);
      return 'result'; // 这里返回值会被忽略
    }
  };
  
  // 错误：类型“void”上不存在属性“length”
  const result = props.onAnythingChange('test');
  console.log(result.length);
  

• 反过来，如果函数类型的返回值是void，你也可以传入一个没有返回值的函数（比如只执行副作用，像更新状态、打印日志、发起API请求等），这也是最常见的用法。

简单说：void在这里是在告诉使用者——这个回调函数是用来“做事情”的，不是用来“返回数据”的。

总结整个Props的作用 #

你的Props类型定义了一个只读对象，这个对象必须包含一个名为onAnythingChange的回调函数：

• 该回调需要接收一个字符串参数（通常是用户输入的查询内容之类的）
• 调用这个回调不需要获取返回值，它的价值在于执行副作用操作

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