Using Typescript with gem

[iporollo]

I was wondering if it is possible to use typescript with this gem.

I do not have the config/wepback/loaders folder, but I do have config/weback/evironment.js to which I tried adding a typescript loader like so:

const { environment } = require('@rails/webpacker')

environment.loaders.set('typescript', {
  test: /.(ts|tsx)$/,
  loader: 'ts-loader'
});

module.exports = environment

Apart from adding this to my config/weback/evironment.js, I also ran yarn add ts-loader typescript @types/react @types/react-dom and added a tsconfig.json file.

This process did didn't seem to work, so I was wondering if I am missing a step or if it's even possible.

Thanks!

[BookOfGreg]

Hi @iporollo
That's an interesting thing to check.
This gem just padded through a lot of responsibility for these things to Webpacker, so if it can be done in Webpacker it can probably be done here.
Here's a guide provided by Webpacker on specifically this issue: https://github.com/rails/webpacker/blob/master/docs/typescript.md
Let me know if that doesn't get you there completely and we can work out the rest, or provide me with a typescript component and I'll see if I can get it to run myself.

If you were looking to do it in sprockets, there would be significant new wiring involved, starting here:
https://github.com/reactjs/react-rails/blob/master/lib/react/jsx/sprockets_strategy.rb#L43

[iporollo]

Hi @BookOfGreg,

Thank you for your quick response. The link you provided - https://github.com/rails/webpacker/blob/master/docs/typescript.md
did the trick.

After following the initial set up of the react rails gem, you simply need to run:

bundle exec rails webpacker:install:typescript
yarn add @types/react @types/react-dom

This adds all of the necessary files and loaders for Typescript support. With that, it is now possible to declare react component files with the .tsx extension.

Thanks again for your time and help. If any more information is needed, let me know.

[BookOfGreg]

Glad it worked! Could you add a little note, perhaps in the Readme for others wanting to use TS?

[iporollo]

Will do, I'll link the pull request here when I create it.

[iporollo]

#873