reactjs - TS 'Object possibly null'错误如何解决？

Question

我有类似的问题thread ，使用 Draft.js 与 React 和 Typescript。使用与他们的文档示例相同的代码，我在 focusEditor 函数中得到 Object is possibly 'null' 错误。即使在我检查空引用时它仍然存在(就像我上面引用的 SO 问题中的解决方案一样)。这是添加了空检查的代码:

import React from 'react';
import { Editor, EditorState } from 'draft-js';

export default () => {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);

  function focusEditor() {
    if (null === editor) {
      throw Error('editor is null') 
    }
    if (null === editor.current) {
      throw Error('editor.current is null') 
    }
    editor.current.focus(); // Error: Object is possibly 'null'
  }

  React.useEffect(() => {
    focusEditor()
  }, []);

  return (
    <div onClick={focusEditor}>
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={editorState => setEditorState(editorState)}
      />
    </div>
  );
}

这应该足以重现错误，我也安装了 @types/draft-js，没有其他问题。

Answer 1

问题是 editor 的类型隐式设置为 React.MutableRefObject<null>这是一个带有 current 的对象保存传入的通用参数的属性。因此签名将类似于:

interface MutableRefObject<T> {
  current: T | null
}

由于您传入 null , 通用参数也被推断为 null .因此，这是 editor.current 的唯一值。应该能hold住。

您应该通过将其作为 useRef<SomeType>() 传递来显式地告诉 TypeScript 编译器您希望将什么作为通用参数。 .您可以使用 any 来回避这个问题。作为以某种类型安全为代价的通用参数，但您最好说出该对象的类型到底是什么。这是一个例子:

import React from 'react';

interface Focusable {
  focus: () => void
}

const editor = React.useRef<Focusable>(null);

function focusEditor() {
  if (null === editor) {
    throw Error('editor is null') 
  }
  if (null === editor.current) {
    throw Error('editor.current is null') 
  }
  editor.current.focus(); 
}

See on TypeScript Playground

我不确定去那里的预期类型是什么，最好只使用 HTMLElement甚至更具体的东西，比如 HTMLTextAreaElement而不是 Focusable我创建了一个例子。

无论如何，这是可以改进的:

React.useRef()总是返回一个对象 和editor是一个常量，因此不能重新分配。这意味着它永远不会是 null .您可以删除第一个支票。

唯一可能是 null是editor.current .如果你不想抛出错误，你可以简单地做一个标准的 null guard 来满足类型检查:

if (null !== editor.current) {
  editor.current.focus();
}

这可以使用 nullish coalescing operator 进一步缩短所以你最终得到这个:

import React from 'react';

const editor = React.useRef<HTMLElement>(null);

function focusEditor() {
  editor.current?.focus();
}

See on TypeScript Playground