在Next.js+TypeScript项目中使用Draft.js时，useRef应指定什么类型？

我最近在Next.js+TypeScript项目里用Draft.js开发表单时，卡在了useRef的类型定义上——就是下面代码里第6行的泛型占位符不知道该填啥：

import {Editor, EditorState} from 'draft-js';
const [editorState, setEditorState] = useState( EditorState.createEmpty() );
const editor = useRef<**WhatDoIUseHere**>(null);
function focusEditor() { editor.current.focus(); }
useEffect(() => { focusEditor() }, []);
return (
  <div onClick={focusEditor}>
    <Editor 
      ref={editor} 
      editorState={editorState} 
      onChange={editorState => setEditorState(editorState)} 
    />
  </div>
)

正确的类型填法 #

首先要确保你已经安装了@types/draft-js（毕竟Draft.js本身不是TypeScript编写的，需要额外安装类型声明包），然后只需要两步就能搞定：

1. 从draft-js中导入官方提供的DraftEditor类型：

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

2. 把useRef的泛型换成DraftEditor：

const editor = useRef<DraftEditor>(null);

这样不仅能消除类型错误，编辑器还能给你正确的代码提示，调用focus()方法也完全符合类型要求啦。

如果实在不想导入额外的类型，也可以用unknown或者{ focus: () => void }来临时解决，但显然用官方提供的DraftEditor类型是最规范、最稳妥的做法。

内容的提问来源于stack exchange，提问作者tallphin