使用 Typescript 反应 useState 以设置嵌套类型对象答案

【问题标题】：React useState with Typescript for setting a nested typed object使用 Typescript 反应 useState 以设置嵌套类型对象
【发布时间】：2019-04-16 19:51:14
【问题描述】：

我有一个汉堡菜单，它将接收两个道具：1）isOpen，和 2）一个文件对象 { name, type, size, modifiedAt, downloadUrl }

我正在尝试做这样的事情，但 Typescript 抱怨

const FileManagerSlide = () => {
  const [burger, setBurger] = useState({
    isOpen: false,
    file: {
      name: null,
      modifiedAt: null,
      size: null,
      type: null,
      downloadUrl: null
    }
  });


  ...

                  <Tr
                  onClick={() =>
                    setBurger({
                      isOpen: true,
                      file: {
                        name: "HR STUFF",
                        modifiedAt: "01/03/2019",
                        size: 40,
                        type: "folder",
                        downloadUrl: "www.google.com"
                      }
                    })
                  }
                >

这是错误：

ERROR in [at-loader] ./src/components/file-manager/file-manager-slide.tsx:287:31
    TS2345: Argument of type '{ isOpen: true; file: { name: string; modifiedAt: string; size: number; type: string; downloadUrl...' is not assignable to parameter of type 'SetStateAction<{ isOpen: boolean; file: { name: null; modifiedAt: null; size: null; type: null; d...'.
  Type '{ isOpen: true; file: { name: string; modifiedAt: string; size: number; type: string; downloadUrl...' is not assignable to type '(prevState: { isOpen: boolean; file: { name: null; modifiedAt: null; size: null; type: null; down...'.
    Type '{ isOpen: true; file: { name: string; modifiedAt: string; size: number; type: string; downloadUrl...' provides no match for the signature '(prevState: { isOpen: boolean; file: { name: null; modifiedAt: null; size: null; type: null; downloadUrl: null; }; }): { isOpen: boolean; file: { name: null; modifiedAt: null; size: null; type: null; downloadUrl: null; }; }'.

我想知道我是否定义了File 类型并将汉堡状态的文件属性转换为它可以工作？

interface File {
  name: string;
  modifiedAt: string;
  size: number;
  type: string;
  downloadUrl: string;
}

但我不知道该怎么做

【问题讨论】：

标签： typescript

【解决方案1】：

你可以这样做：

为组件状态中的“文件”属性定义一个类型。

type TFile={
   name?:string,
   modifiedAt?:string,
   size?:number,
   type?:string,
   downloadUrl?:string
 }

所有属性都标记为可选。

在你的组件函数中为“文件”属性指定一个类型

const [burger,setBurger]=React.useState({
    isOpen:false,
    file:{} as TFile
  })

我们可以将文件属性设置为空对象，因为所有属性都是可选的，ts 不会报错。但这意味着名称、大小和其他属性将是未定义的（不是你写的“null”）。如果您需要它们为“null”，则需要修改 TFile 类型

您可以使用另一种语法并编写

 file:<TFile>{}

但不幸的是，在tsx 文件中，您只能使用“as TFile”语法。

当您在点击处理程序中设置状态时，此打字稿不应抱怨：

setBurger({isOpen:false, file: {
                    name: "HR STUFF",
                    modifiedAt: "01/03/2019",
                    size: 40,
                    type: "folder",
                    downloadUrl: "www.google.com"
                  }}) -->>should be ok

【讨论】：