迹忆客 专注技术分享

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

下面是产生上述错误的示例代码。

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 钩子上使用泛型来键入状态数组。

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[] 类型，它是一个包含任何类型元素的数组。

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

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 类型。

要对此进行调试，请将鼠标悬停在该值上以查看其类型并寻找明确键入它的方法。 如果我们正在使用 React 钩子，那么很有可能您必须像我们使用 useState 钩子那样使用泛型。

如果我们输入的是基本 TypeScript 变量，只需用冒号分隔变量名称及其类型。

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;

总结

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