refactor(v2): Typescript support in our theme plugin

[fanny]

💥 Proposal

(A clear and concise description of what the proposal is.)
I know that we already have this for some plugins, like docusaurus, docs-plugin, blog-plugin but
Typescript is getting more popular over the years, in Front End Development. You can have a idea of the market size here.
Althought many people can complain about the increasing of time in the development, I tend to think that the benefits provided by have a type system overcome this time. Here are some advantages:

1. Code is easier to understand: It's easy to know which params are expected and returned
2. Useful to find bugs: You can have problems passing null values, or an object in a function that expects an array
3. Easier to debug
4. Aids the developer in having the correct workflow

If you have interest, I can work on this.

Have you read the Contributing Guidelines on issues?

yes

[lex111]

Honestly, I don’t see big advantages in rewriting theme components from JS to TS. I would even recommend not to do this.
Using TS in core is justified and reasonable, but not in React components, IMO.

[yangshun]

I think it'll be good to rewrite our components in TS. Our theme components are considered APIs and typesafety will be useful. However, it might be an issue if someone swizzles a tsx component but are not using TypeScript.

[SamChou19815]

Is it possible to write theme components in TS, and then use babel to generate the JS just with all the types stripped? When running swizzle, it still defaults to emit JS code, but it can emit TS code by passing --typescript.

[fanny]

Good question @SamChou19815. I'll investigate

[fanny]

I didn't found any good solution that can solve our problem with interoperability. One possible approach is use JSDoc, but I don't know if is the more appropriate. Since put types as comments, can be weird, but ensure that the types are correct and make the things easier to contribute. What do you think?

[SamChou19815]

@fanny I created a proof-of-concept JS file generation in #2614. Using typescript compiler API might be an overkill. Babel's TS plugin seems to solve the problem pretty good.

[fanny]

Amazing @SamChou19815. Thanks to put effort on this, I didn't think in use the babel, because I thought that was a think that only ts compiler would can solve. I loved your solution, I'm looking forward to replicate in a theme that I'm building.

It'll be very useful for the community.

[slorber]

The classic theme is in TypeScript now.

Even if types are not 100% accurate yet, I believe this issue has been implemented and we allow swizzlin the components in TS or in JS (after transpilation in js/next, keeping modern syntax)