Scaffold for typescript in `@wordpress/create-block`

[AdsonCicilioti]

What problem does this address?

For those who already use Typescript, it is extremely unsatisfactory to have to work with JS. Even more so when getting to know a new library and its API.

What is your proposed solution?

The @wordpress/create-block package could have a scaffold for Typescript. This would help a lot in learning and greatly improve the developer experience.

[gziolo]

@ryanwelcher, do you have a template for Create Block that works with TypeScript?

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[Mamaduka]

An excellent idea for the "Create Block" template.

I'm going to remove the "Needs Testing" label.

[ryanwelcher]

This doesn't need to be part of the tool but rather can be an external template. The two templates that are included are the most common use cases and I wonder if enough block developers are using Typescript to make this part of the tool instead of an external template.

To be clear, I LOVE the idea of having a template that supports TS and this is where we should be headed.

However, in my ( admittedly limited ) experience working with blocks and TS, the main pain point is the lack of available types. There has been an effort to add types to many of the packages in GB but not for some of the packages that block developers will use, such as the @wordpress/blocks package and the types available at DefinitelyTyped don't reflect the current APIs. There is an effort to move those into the project ( #43686 ) but it has stalled - which is on me.

I think that before we move a full TS template into the tool, we should get the types in place for the packages that block devs will use to avoid the hassle of having to extend an out-of-date type set or having to roll their own types for built-in items.

This is a larger question that perhaps needs its own issue but perhaps we should consider creating this template as an external package in the repo. This would allow the types to be introduced in the template and then moved over to the corresponding packages as needed.

[gziolo]

This is a larger question that perhaps needs its own issue but perhaps we should consider creating this template as an external package in the repo. This would allow the types to be introduced in the template and then moved over to the corresponding packages as needed.

I fully agree that the first step would be to create the external template hosted on npm or GitHub (assuming Create Block can consume GitHub repository) that works with TypeScript. I don't think we are in good shape in terms of types to offer an official template that is 100% TypeScript ready. However, having an unofficial template ready for the community would help find what's missing and bring more attention to tasks that eventually bridge the gaps.

[tresorama]

I would be good to have a semi-official scaffolded template in TS.

The good news about current situation is that webpack config that ships with @wordpress/create-block is already compatible with TS, it's necessary only to change extension of files to .ts and everyting compiles.

Maybe is required also to create a tsconfig.json in your workspace, i don't remember exactly. But you can grap a prefilled json config from the tsc cli or from https://github.com/tsconfig/bases

[tuanfront-end]

Hello @ryanwelcher, hope there are new updates on this?

[luisherranz]

Just as a heads up, I was planning to include a new template to show how to use TypeScript with the Interactivity API in this pull request:

• iAPI: Refactor types and add a "Core Concepts - Using TypeScript" guide #64577

It might make sense to create a general TypeScript template where the block is interactive and the Interactivity API is also typed instead of creating a template just for the Interactivity API, but for the conversation here it seems like that's not something that will happen soon, is it? Should I continue with the Interactivity API-only template? What do you think?

[gziolo]

Just as a heads up, I was planning to include a new template to show how to use TypeScript with the Interactivity API in this pull request:

#64577

I responded with the following #64577 (comment). The gist of it is, the main differences when using TypeScript is the file extensions and types added to JavaScript code so there is no need for creating new templates. Instead, we can offer variants of existing templates using concept of variants.