An example repository with the basic plumbing in place to build a WordPress block using Typescript.

Clone repository to a WordPress plugin directory, or create appropriate symlinks to your WordPress install, and activate plugin in wp-admin.

Note: I'm using yarn here because it tends to be simplier, you can use equivalent npm commands.

You need to build the block before you can use in the editor, you need to run the following first:

$ yarn
$ yarn build

To start a development build, that includes the --watch flag to auto rebuild on change:

$ yarn start

The block is built by extending the webpack config for the standard wp-scripts, adding additional loader/resolver for .tsx and .ts files. See webpack.config.js

For React props, you need to specify the types for your properties, see the src/edit.tsx file for an example defining className as a string.

Depending on the packages you use for your block, you may need to add additional type support. The following was done to add types for the @wordpress/blocks package used.

$ yarn add @types/wordpress__blocks

For example, if your block uses components from @wordpress/components you will need to add the necessary types. Use:

$ yarn add @types/wordpress__components