React中如何直接将props作为常量传入并声明TypeScript类型

你之前的写法是把对象解构的重命名语法和类型声明搞混了，{tasks: TaskType[]}在JS语法里代表将props中的tasks属性重命名为TaskType变量，后续跟[]属于非法语法，自然会触发TS报错。

如果你不想单独定义Props类型，可以直接给整个props对象内联声明类型，有两种常用写法： #

写法1：直接给参数加内联类型 #

直接在解构的props对象后加类型声明：

import type { TaskType } from '你的TaskType定义文件路径';

const ComponentName = ({ tasks }: { tasks: TaskType[] }) => {
  return <>{tasks[0]}</>
}

如果有多个属性，直接在类型对象里追加即可，不需要单独抽离Props类型：

const ComponentName = ({ tasks, title }: { tasks: TaskType[], title: string, disabled?: boolean }) => {
  // 组件逻辑
}

写法2：结合React.FC泛型写 #

如果你习惯用React.FC定义函数组件，也可以把类型直接写在泛型位置：

import type { TaskType } from '你的TaskType定义文件路径';

const ComponentName: React.FC<{ tasks: TaskType[] }> = ({ tasks }) => {
  return <>{tasks[0]}</>
}

注意事项 #

• 确保你已经从定义文件正确引入了TaskType类型，未引入的类型会触发TS的未定义报错
• 如果组件props较多、后续需要复用类型，还是建议单独抽离Props接口，维护性会更高

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