能否在TypeScript解构组件属性的同一行声明类型？

当然可以不用单独写interface，直接在解构参数处用对象类型字面量声明类型，完美解决你说的“冗长”和“类型与解构分离”的问题。

核心写法示例 #

function MyComponent({
  name = "",
  type = "text",
  minLength,
  maxLength,
  ...props
}: {
  name: string;
  type: string;
  minLength?: number;
  maxLength?: number;
  [key: string]: unknown; // 剩余props的类型，用unknown比any更安全
}) {
  return null;
}

关键细节说明 #

1. 正确类型语法：TypeScript不支持你示例里name, (String)的写法，必须在类型字面量里用键: 类型的格式声明，语法和interface一致，但直接嵌在参数后面。
2. 原生类型小写：要用string/number而不是大写的String/Number——大写的是构造函数类型，仅用于标注构造函数本身，普通值的类型都用小写基础类型。
3. 可选属性标记：依然用?后缀表示可选属性，比如minLength?: number。
4. 剩余props类型：...props的类型可以用[key: string]: unknown（推荐，类型更安全）或者[key: string]: any，如果知道剩余props的具体结构，也可以精准定义。

复用场景的简化方案 #

如果这个Props类型需要在多个地方复用，用type类型别名比interface更简洁（少一行代码）：

type MyComponentProps = {
  name: string;
  type: string;
  minLength?: number;
  maxLength?: number;
};

function MyComponent({
  name = "",
  type = "text",
  minLength,
  maxLength,
  ...props
}: MyComponentProps) {
  return null;
}

这种写法既保留了TypeScript的类型检查能力，又解决了你觉得interface冗长、来回切换查看的问题。

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