TypeScript でカスタムブロックを書く

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.tsxEdit メソッドで試してみます。
メソッドの引数に型を指定して定義すると、注釈が表示されます。

Visual Studio Code での表示例

型を引数で渡すように注釈が表示されるので、型を渡してみます。

これだけだと使い出がないので BlockAttributes 型を拡張して、Attr 型を作ってやると…

このように、text 変数にフォーカスすると型情報が表示されます。

LSP を通じて解析結果を受け取っているため、Visual Studio Code 以外のエディターでも TypeScript の型システムの恩恵に与れます。

例えば、私の常用している NeoVim ではこのようになります。

赤い文字が LSP による注釈

というか、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日の記事

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください