WordPress のカスタムブロックの開発で、TypeScript が使える環境が整いつつあります。
npm の @wordpress/create-block 公式サポートツールや WP-CLI でスキャフォルドを利用すると、選べる言語は JS (ES5) か ESNext (ES6) です。一方、@wordpress/scripts の Ver 20 以降なら、TypeScript のコンパイルをサポートしており、型定義ファイルも @types パッケージで導入できます。
この記事では、TypeScript の導入方法を紹介します。TypeScript でどう書くのか？どう書くのがいいのか？までは辿り着けてません。
サポートツールでファイル一式を用意
@wordpress/create-block – Japanese Team – WordPress.org 日本語
ハンドブックに従って、開発環境を用意します。最低限、ブロックのslugだけ引数で渡せば作成できます。
詳細はこちらの記事を参考にして下さい ― Gutenbergのブロックを作る
$ npx @wordpress/create-block try-ts カスタムブロックはテーマに組み込むこともできますが、公式にはプラグインとして組み込むのが推奨です。
型定義を導入
型定義も用意されていますので、これでパッケージがインストールできます。
npm i @types/wordpress__block --save-devどんな型定義があるかは、もちろん Type Script 公式サイトで探せます。 npm パッケージのサイトでも探せます。一方、WordPress のブロックエディターハンドブック等には記載がありません。
カスタムブロックなら、この4つぐらい入れておけば足りるのではないでしょうか。国際化対応しないなら、i18n は要らないでしょう。
- @types/wordpress__block-editor
- @types/wordpress__blocks
- @types/wordpress__components
- @types/wordpress__i18n
拡張子の変更
js → tsx に変えます。
- /src
- edit.tsx
- index.tsx
- save.tsx
tsconfig の設定
tsconfig.json をプラグインフォルダに作成。設定はコンパイルオプションを react にするだけです。
{
"compilerOptions":{
"jsx": "react-jsx"
}
}ビルド
npm run start
1回限りのビルドなら、npm run build
TypeScript で書く
edit.tsx の Edit メソッドで試してみます。
メソッドの引数に型を指定して定義すると、注釈が表示されます。
型を引数で渡すように注釈が表示されるので、型を渡してみます。
これだけだと使い出がないので BlockAttributes 型を拡張して、Attr 型を作ってやると…
このように、text 変数にフォーカスすると型情報が表示されます。
LSP を通じて解析結果を受け取っているため、Visual Studio Code 以外のエディターでも TypeScript の型システムの恩恵に与れます。
例えば、私の常用している NeoVim ではこのようになります。
というか、LSP の元になったのが OmniSharp という Vim プラグインだったりします。
終わりに
公式にサポートされていると言っていいのかは、今のところちょっと分からない状態です。ハンドブックなどには記載がありません。全体の型システムがどうなっているかも、概要がなくて型定義を読んで把握するしかなさそうです。
しかし、Gutenberg コアは TypeScript が使えるところは使っているとのことです。また、スキャフォルド時に選べるようにしてはどうか？というIssue が立っています。将来的に TypeScript が選べるようになると思われます。
Scaffold for typescript in @wordpress/create-block · Issue #39915 · WordPress/gutenberg
参考：Proposal: Native TypeScript support in Gutenberg – Make WordPress Core 2021年3月18日の記事