React组件props中{ placeholder }: { placeholder: string }的冒号是什么意思？

你看到的{ placeholder }: { placeholder: string }是ES6对象解构语法和TypeScript类型注解的组合写法，拆分来看：

• 前面的{ placeholder }是对象解构：从组件接收的完整props对象里，直接提取出placeholder属性作为局部变量，这样你不用每次写props.placeholder，直接用placeholder就行。
• 冒号:后面的{ placeholder: string }是TypeScript的类型注解：用来指定这个组件接收的props对象的类型——它必须包含一个名为placeholder、类型为string的属性。

同样的逻辑也适用于Page组件的写法：

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  }
}) { /* ... */ }

这里的{ searchParams }是解构props里的searchParams属性，冒号后面的类型则指定searchParams是一个可选的对象，里面的query和page也都是可选的字符串类型。

如果把Search组件的写法展开成更直观的形式，你就能更清楚两者的关系：

// 等价的完整写法
export default function Search(props: { placeholder: string }) {
  const placeholder = props.placeholder; // 手动解构
  // ... 组件逻辑
}

简单来说，冒号在这里的核心作用是给解构后的props指定TypeScript类型，而前面的大括号是简化props使用的解构语法，两者搭配实现了「便捷使用props + 类型安全约束」的效果。

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