Typescript Integration (with React)

[btc]

Is there an easy way to get started with Typescript without Angular?

[gauravtiwari]

@btc You can remove the angular example and modules from package.json except typescript and it should work?

[gauravtiwari]

Here is an example setup - https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

[btc]

For others who follow in my steps, here are the steps I took to get Typescript working with a Rails project generated using --webpacker=react:

1. Add new dependencies to package.json by executing yarn add ts-loader typescript @types/react @types/react-dom.
2. Run bin/yarn to update yarn.lock
3. Copy tsconfig.json from a Rails project generated using --webpacker=angular or from the code block below:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "public"
  ],
  "compileOnSave": false
}

4. Add option "jsx": "react" to the compilerOptions section of tsconfig.json.
5. Create config/webpack/loaders/typescript.js with the following contents:

module.exports = {
    test: /.(ts|tsx)$/,
    loader: 'ts-loader'
}

6. Rename your generated hello_react.js to hello_react.tsx and make it valid typescript:

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface HelloProps { name: string; }

const Hello = (props: HelloProps) => (
  <div>Hello {props.name}!</div>
)

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

7. Since we have a type checker, we can remove the prop-types package by executing yarn remove prop-types.
8. Add .tsx to the list of extensions in config/webpacker/paths.yml.

et Voila.

For those who would like a shortcut, I published a Rails 5.1 React Typescript starter project here at https://github.com/btc/rails-starter-2017

[btc]

Given that Typescript and React work so well together, how would maintainers feel about making Typescript-flavored React available as a generator option? e.g. --webpack=react-ts

[gauravtiwari]

@btc Not sure if we should add this to webpacker itself since this is very project specific requirement. Perhaps, another gem (webpacker-react-ts) could setup an installer or may best to document this in README/guide #372

[KurtPreston]

For anyone having problems with these instructions after upgarding to webpacker 3.2, I found that I was able to get it working by deleting the config/webpack/loaders/typescript.js file, and instead declaring the loader in config/webpack/environment.js:

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

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

module.exports = environment

[boblail]

For anyone in finds this thread in 2021, the instructions above don't work on 5.2, but there are docs for how to set this up: https://github.com/rails/webpacker/blob/v5.2.1/docs/typescript.md#upgrading-to-51