Reactベースのリッチテキストエディタ開発フレームワーク「draft-js」は、柔軟なAPIと拡張性の高さで知られています。しかし、型安全性の欠如により、実行時エラーが頻発し、保守性が低下するケースが多く見られます。TypeScriptを導入することで、これらの課題を静的型チェックによって解決し、より堅牢で生産性の高い開発環境を構築できます。

TypeScriptとの統合がもたらすメリット

draft-jsは内部でFlow型システムを使用していますが、TypeScriptと組み合わせることで、以下のような開発体験の向上が可能です：

• コンパイル時のエラー検出：型不整合や未定義プロパティの参照を事前に防止
• IDE支援の強化：オートコンプリートやジャンプ定義で開発スピード向上
• チーム開発の円滑化：型定義を通じてAPIの意図が明確になり、レビュー効率が改善

環境構築手順

まず必要なパッケージをインストールします：

npm install draft-js react react-dom
npm install -D typescript @types/draft-js @types/react @types/react-dom

次に、tsconfig.json を以下のように設定します：

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["DOM", "ES2020"],
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

型安全なエディタコンポーネントの実装例

以下は、状態管理を型で厳密に制御した基本的なエディタ実装です：

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

interface TextEditorProps {
  initialContent?: string;
}

const RichTextEditor: React.FC<TextEditorProps> = ({ initialContent }) => {
  const [state, updateState] = React.useState<EditorState>(() => 
    initialContent 
      ? EditorState.createWithContent(ContentState.createFromText(initialContent))
      : EditorState.createEmpty()
  );

  const onEditorChange = useCallback((nextState: EditorState) => {
    updateState(nextState);
  }, []);

  const toggleBold = () => {
    updateState(RichUtils.toggleInlineStyle(state, 'BOLD'));
  };

  return (
    <div className="editor-container">
      <button onClick={toggleBold}>太字</button>
      <div className="editor-wrapper">
        <Editor
          editorState={state}
          onChange={onEditorChange}
          placeholder="ここにテキストを入力..."
        />
      </div>
    </div>
  );
};

export default RichTextEditor;

カスタムエンティティの型定義

リンクや画像などのカスタム要素を扱う際は、次のように型を明示的に定義します：

type LinkMetadata = {
  href: string;
  title?: string;
  target?: '_blank' | '_self';
};

// エンティティ生成時に型を適用
const createLinkEntity = (metadata: LinkMetadata) => {
  return Entity.create('LINK', 'MUTABLE', metadata);
};

複雑な状態遷移の型ガード

非同期処理や外部イベントとの連携では、状態の一貫性を保つためにガード関数を活用します：

const isEditorStateValid = (candidate: unknown): candidate is EditorState => {
  return candidate instanceof EditorState;
};

const handleExternalUpdate = (rawData: unknown) => {
  if (isEditorStateValid(rawData)) {
    setState(rawData); // 型安全に更新
  }
};