- rails webpacker:install:typescript

- Add "allowSyntheticDefaultImports": true to tsconfig
- Convert component to tsx and FC component
- yarn remove babel-plugin-transform-react-remove-prop-types prop-types

app/javascript/components/HelloWorld.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+type Props = {
+  greeting: string
+}
+
+const HelloWorld: React.VFC<Props> = ({ greeting }) => {
+  return <>
+    Greetingts: {greeting}
+  </>
+}
+export default HelloWorld

app/javascript/packs/hello_typescript.ts

@@ -0,0 +1,4 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+
+console.log('Hello world from typescript');

babel.config.js

@@ -43,7 +43,8 @@ module.exports = function(api) {
           development: isDevelopmentEnv || isTestEnv,
           useBuiltIns: true
         }
-      ]
+      ],
+      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',

config/webpacker.yml

@@ -33,6 +33,8 @@ default: &default
     - .woff2
 
   extensions:
+    - .tsx
+    - .ts
     - .jsx
     - .mjs
     - .js

package.json

@@ -3,16 +3,18 @@
   "private": true,
   "dependencies": {
     "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "prop-types": "^15.7.2",
+    "@types/react": "^17.0.16",
+    "@types/react-dom": "^17.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react_ujs": "^2.6.1",
     "turbolinks": "^5.2.0",
+    "typescript": "^4.3.5",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
   },

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "module": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es5",
+    "jsx": "react",
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules",
+    "vendor",
+    "public"
+  ],
+  "compileOnSave": false
+}