将基于 js useState 数组的 class 转换为 typescript Hook 问题

Question

---

更新

我通过将我的 useState 声明更改为：

const [ data, setData ] = useState([]);

至

const [ data, setData ] = useState<any>([]); //{type: read/write/notify/error, bin: 8 int binary, ascii: ASCII Value}

但是，我意识到这只是击败了使用 Typescript 的 object。 所以，我基于@tomleb3 答案的下一步是为data创建一个接口，如下所示：

const [ data, setData ] = useState<DataType>([]); //{type: read/write/notify/error, bin: 8 int binary, ascii: ASCII Value}
  
  interface DataType{
    chx: any,
    bin: string,
    type: string,
    ascii: string
  }

但这给出了一个错误：

“never[]”类型的参数不能分配给“DataType |”类型的参数 (() => 数据类型)'。 类型 'never[]' 不可分配给类型 '() => DataType'。 类型 'never[]' 与签名 '(): DataType' 不匹配。

我不知道如何从这里开始，因为删除[] useState 声明然后将错误推送到我使用setData()调用的任何地方，并出现以下错误：

'any[]' 类型的参数不可分配给 'SetStateAction<DataType | 类型的参数未定义>'。 类型 'any[]' 不可分配给类型 '(prevState: DataType | undefined) => DataType | 不明确的'。

---

原帖

我一直在使用 react / typescript 几天，并通过做一个小项目自学。 作为其中的一部分，我目前正在将一些基于 class 的代码转换为挂钩。

我有以下（js）基于 class 的代码，我不知道如何转换为在与 typescript 的挂钩中使用：

this.setState({
  data: [
    ...this.state.data,
    {
      chx: chx,
      type: type,
      bin: bin,
      ascii: ascii,
    },
  ],
});

在基于钩子的等效项中，我知道我会使用setData(); 对于一个简单的 state。 但是，如何转换上面的示例？ 我的尝试（如下）显然是错误的，因为我收到了错误： Type '{ chx: unknown; type: string; bin: string; ascii: string; }' is not assignable to type 'never'. Type '{ chx: unknown; type: string; bin: string; ascii: string; }' is not assignable to type 'never'. 但我坚持下一步应该做些什么来尝试解决这个问题：

setData([
  ...data,
  {
    chx: chx,
    type: type,
    bin: bin,
    ascii: ascii,
  }
])

任何指针/解决方案将不胜感激。

谢谢。

Answer 1

您收到的错误是 Typescript 错误，而不是 React 错误。
您的代码非常好，但是在使用 Typescript 时，我们需要键入我们的状态以及其他所有内容。

例如，它看起来像这样：

interface State {
   key1: string,
   key2: number,
   key3: boolean,
}

function myComponent() {
   const [state, setState] = useState<State>({
      key1: 'test',
      key2: 42,
      key3: false,
   })
}

这允许 Typescript 了解 state 的结构，从而使其能够应用相关的类型保护和限制。