类型不可分配给 React 中的“从不”类型

类型不可分配给 React 中的类型“从不”

Type is not assignable to type ‘never’ in React

当我们用useState钩子声明一个空状态数组但不键入数组时，会出现错误“Type is not assignable to type ‘never’”。要解决该错误，请使用泛型来键入状态数组，例如
const [arr, setArr] = useState<string[]>([]).

下面是错误如何发生的示例。

应用程序.tsx


import {useState} from 'react';

function App() {
  // 👇️ arr is never[]
  const [arr, setArr] = useState([]);

  // ⛔️ Error: Type 'number' is not assignable to type 'never'.ts(2322)
  setArr([1, 2, 3]);

  return (
    <div className="App">
      <div>Hello world</div>
    </div>
  );
}

export default App;

错误是因为我们声明了一个空状态数组而没有显式键入它。

数组的类型被推断为never[]，换句话说，一个永远为空的数组，这不是我们想要的。

要解决该错误，请在
useState挂钩上使用泛型来键入状态数组。

应用程序.tsx


import {useState} from 'react';

function App() {
  // 👇️ type the array with the generic
  const [arr, setArr] = useState<any[]>([]);

  setArr([1, 2, 3]);

  return (
    <div className="App">
      <div>Hello world</div>
    </div>
  );
}

export default App;

我们使用了非常广泛的类型any[]，它是一个包含任何类型元素的数组。

在可能的情况下，越具体越好。

应用程序.tsx


import {useState} from 'react';

function App() {
  // 👇️ array of strings
  const [strArr, setStrArr] = useState<string[]>([]);

  // 👇️ an array of objects
  const [objArr, setObjArr] = useState<{name: string; age: number}[]>([]);

  setStrArr(['a', 'b', 'c']);

  setObjArr([{name: 'A', age: 1}]);

  return (
    <div className="App">
      <div>Hello world</div>
    </div>
  );
}

export default App;

上面的示例显示了如何将状态数组键入为字符串数组或对象数组。

使用 TypeScript 时，始终确保在 React 中显式键入空数组。

如果您收到包含
never
类型的错误消息，则很有可能您忘记了显式键入一个值，并且它被推断为具有never.

To debug this, hover over the value to see its type and look for ways to explicitly type it. If you’re working with react hooks, there’s a very good chance you have to use a generic as we did with the useState hook.

If you are typing a basic TypeScript variable, just separate the variable name
and its type with a colon.

App.tsx


function App() {
  // 👇️ declare array of strings
  const arr: string[] = [];

  arr.push('a', 'b', 'c');

  return (
    <div className="App">
      <div>Hello world</div>
    </div>
  );
}

export default App;

Conclusion #

The error “Type is not assignable to type ‘never'” occurs when we declare an
empty state array with the useState hook but don’t type the array. To solve
the error, use a generic to type the state array, e.g.
const [arr, setArr] = useState<string[]>([]).

–