Create a Tab on docusaurus for Typescript implementations

[pedroapfilho]

I came across the Setup on the React docs, and I found this.

Using it with typescript is a little bit tricky for new comers, and I think that it may happen with a lot of people, so what if we use the new Markdown Feature for Docusaurus that allows us to create Tabs on the docs that are for JS, and use:

<Tabs
  groupId="test-utils"
  defaultValue="js"
  values={[
    {label: 'Javascript', value: 'js'},
    {label: 'Typescript', value: 'tsx'},
  ]}>
  <TabItem value="win">Code for JS here</TabItem>
  <TabItem value="mac">Code for TS here</TabItem>
</Tabs>

So we could have more people using it right with `Typescript.

Is it a good idea? I can implement it here at first, and then we take it as a default and implement it everywhere else, whenever we touch it.

Material-UI did it on their docs, and I find it so much better to use it like this. Idk if they use Docusaurus, but it's easily implementable..`

[MatanBobi]

Hi @pedroapfilho, thanks for opening this!
It sounds good to me, we've already added Tabs and TabItem in some docs and there's also a code snippet for vscode to generate those.
Since we don't have typescript blocks in the docs yet, maybe it would be better to have another opinion..
@nickmccurdy, @kentcdodds wdyt about this one?

[kentcdodds]

Seems to make sense to me if anyone's willing to do the work there.

[pedroapfilho]

Alright, I'll start then!

[nickserv]

Would it be possible to have the TypeScript code typechecked and compiled to the JavaScript code automatically to keep the types and both code examples in sync?

[kentcdodds]

I'd be worried about the compiled version looking like.... compiled code 😅 But it's possible that the right babel plugins + prettier could be used to only remove types 🤔

[nickserv]

As far as I understand that's pretty much what @babel/preset-typescript does.

[pedroapfilho]

@nickmccurdy Do you have any examples of it somewhere I can see?

[nickserv]

Examples of what?

[pedroapfilho]

Of any docusaurus docs that has this setup