カスタムブロック開発を TypeScript で行う。

TypeScript で書いたコードをいろいろいじってたら、カスタムブロックもTypeScirpt で書きたくなってきました。そんなわけでいろいろ試行錯誤してみてます。

レポジトリ:https://github.com/torounit/gutenberg-examples-with-typescript

一からwebpack の設定とかを扱うのは面倒だし、@wordpress/scirpts の wp-scirpts はそのまま使いたいなーと言うことで、webpack の設定を一部上書きする格好で設定しています。

wp-scripts になるべく乗っかりたいので、ts-loader ではなく、babel でコンパイルするようにしてます。なので、tsc での型チェックをビルド時に走らせてます。

Babel 7でTypeScriptをトランスパイルしつつ型チェックをする 〜webpack 4 + Babel 7 + TypeScript + TypeScript EsLint + Prettierの開発環境を構築する〜 の記事を参考にいろいろしてます。

ブロックエディター周りのパッケージの型定義もDefinitelyTyped に入っていたりするので、以外に簡単に TypeScirpt での開発できそうです。