React 中的“从不”类型不存在属性

Property does not exist on type ‘never’ in React

当我们忘记键入一个状态数组或没有键入useRef钩子的返回值时，就会出现“Property does not exist on type ‘never’”的错误。要解决该错误，请使用泛型在 React 应用程序中显式键入状态数组或 ref 值。

类型 never 上不存在属性

如果在使用useState挂钩声明数组状态变量时出现错误
，请使用泛型来键入数组。

应用程序.tsx


import {useState} from 'react';

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


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

export default App;

该示例使用非常广泛的any类型，但该概念适用于更具体的类型。

下面是一些示例，说明在键入数组状态变量时如何使用更具体的类型。

应用程序.tsx


import {useState} from 'react';

function App() {
  // 👇️ type it as string[]
  const [strArr, setStrArr] = useState<string[]>([]);

  // 👇️ type it as object array
  const [objArr, setObjArr] = useState<{name: string; age: number}[]>([]);

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

export default App;

这解决了错误的原因是因为如果您不显式键入数组，它会隐式获取类型never[]，这实际上是一个始终为空的数组。

在将 refs 与useRef挂钩结合使用时，您还可能会收到“类型‘never’上不存在属性”错误
。

应用程序.tsx


import {useEffect, useRef} from 'react';

const ComponentA = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // ⛔️ Error: Property 'focus' does not exist on type 'never'.ts(2339)
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
};

要解决该错误，请使用泛型显式键入ref.

应用程序.tsx


import {useEffect, useRef} from 'react';

const ComponentA = () => {
  // 👇️ type the ref as HTML input element
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // ✅ Works now
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
};

我们使用泛型将 ref 类型化为 an，HTMLInputElement因为我们将分配给ref示例中的input元素。

您的类型可能会有所不同。如果是不同的 HTML 元素，它们的名称是一致的，例如HTMLDivElement,HTMLSpanElement等。

您还可以将鼠标悬停在任何 JSX 元素上并阅读其类型。

的类型ref可以是对象或适合您的用例的任何类型。

应用程序.tsx


import {useRef} from 'react';

const ComponentA = () => {
  const inputRef = useRef<{name: string}>(null);

  console.log(inputRef.current?.name.toUpperCase());

  return (
    <div>
      Hello World
    </div>
  );
};

这是必要的，因为如果我们不输入ref，TypeScript 就无法知道我们最终会分配给它什么类型的值。

请注意，我们还使用了可选的链接 (?.) 运算符。TypeScript 不知道我们是要给赋值ref，还是像前面的例子那样把它赋给 HTML 元素。

如果您收到“属性在‘never’类型上不存在”错误，很可能是您忘记了显式键入一个值，而它隐式地分配了一个never类型。

要对此进行调试，请将鼠标悬停在该值上并寻找输入它的方法——如果使用 React 钩子，最有可能使用泛型。

结论

–