React TypeScriptでAceEditorから、入力した値を取得する方法

タイトルの通り。
React（TypeScript）でAceEditorを使う方法を解説している記事が見つからず、
入力内容を取得するところで大苦労したので共有。

---

早速コードから、

function EditorForm() {
	const editorRef = useRef(null);
	
	return (<>
		<form onSubmit={(event) => {
			event.preventDefault();
			if (editorRef.current != null) {
				const target = editorRef.current as AceEditor;
				console.log(target.editor.getValue());
			}
		}}>
			<AceEditor ref={editorRef} />
			<input type="submit" value="Run" />
		</form>
	</>);
}

export default EditorForm;

---

要点を解説

refを使って値を取得します。
JavaScriptの場合だと、

editorRef.current.editor.getValue()

だけで取得できるようですが、
TypeScriptの場合だと、

TS2339: Property 'editor' does not exist on type 'never'.

と、怒られます。（ページに表示されたエラーメッセージを消して、submitの処理を発火させると実は値を取得できていることが分かります。）

なので、

editorRef.current as AceEditor

のように、明示的にキャストし、AceEditorにあるプロパティを読めるようにします。
参考：https://github.com/securingsincity/react-ace/issues/685

---

editorRef.currentには、初期化の段階でnullを格納しているので、

if (editorRef.current != null) {
	...
}

が無いとコンパイルが通りません。
ここの対処はuseRefの勉強不足のため、良い方法が思いつかなかった。

---

ちなみに

AceEditorの中身にはtextareaがある、そこに値が入っている。
なので、

const textarea = document.getElementsByTagName('textarea')[0] as HTMLTextAreaElement;
console.log(textarea.value);

このように、無理やりDOMを掴んで値を搾り取ってやることもできる。
Reactでdocument.を使うのはなんか美しくないので私は使いません。

以上。