TypeScript解构函数参数冗余问题，求React组件场景优化方案

你提到的{ items of string[], css of string[] }写法并不是TypeScript支持的语法，目前没有这种直接在解构时单独标注属性类型的写法，但可以通过以下几种方式解决冗余问题，适配React组件场景：

1. 抽离Props接口/类型别名 #

这是最常用且优雅的方案，把组件的props类型单独定义，复用性强，代码结构清晰：

用interface定义 #

interface ListProps {
  items: string[];
  css: string[];
}

const List = ({ items, css }: ListProps) => {
  return (
    <div className={css.join(' ')}>
      {items.map(item => <span key={item}>{item}</span>)}
    </div>
  );
};

用type定义 #

如果只是简单的对象类型，也可以用类型别名：

type ListProps = {
  items: string[];
  css: string[];
};

const List = ({ items, css }: ListProps) => {
  // 组件逻辑
};

2. 使用React.FC类型声明组件 #

结合React官方的React.FC类型，可以把props类型直接绑定到组件上，解构时无需重复声明类型：

import React from 'react';

type ListProps = {
  items: string[];
  css: string[];
};

const List: React.FC<ListProps> = ({ items, css }) => {
  return <div>{items.map(item => <p key={item}>{item}</p>)}</div>;
};

注意：React.FC会自动包含children属性（可选），如果不需要可以显式在Props里声明children?: never来屏蔽。

3. 结合默认参数简化可选属性 #

如果部分props有默认值，可以利用TypeScript的类型推断简化声明：

// css为可选属性，默认值是空数组
const List = ({ items, css = [] }: { items: string[], css?: string[] }) => {
  return <div className={css.join(' ')}>{items}</div>;
};

不过这种写法仍有少量重复，适合简单场景，复杂组件还是推荐抽离Props类型。

需要明确的是：React组件的props本质就是一个单一对象，无法脱离这个“对象包装器”传递参数，所以所有组件的参数都必须通过props对象传递，通过抽离类型的方式是解决冗余最合理的方案。

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