Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
app Drop TypeScript from examples Jul 3, 2019
bin Add typescript example Jun 23, 2019
config Add typescript example Jun 23, 2019
lib Add typescript example Jun 23, 2019
log Add typescript example Jun 23, 2019
public Add typescript example Jun 23, 2019
tmp
vendor Add typescript example Jun 23, 2019
.gitignore Add typescript example Jun 23, 2019
Gemfile
Gemfile.lock Drop TypeScript from examples Jul 3, 2019
README.md
Rakefile Add typescript example Jun 23, 2019
config.ru
package-lock.json Add typescript example Jun 23, 2019
package.json Add typescript example Jun 23, 2019
tsconfig.json Add typescript example Jun 23, 2019
webpack.config.js Remove chunkFilename output.chunkFilename Jun 24, 2019

README.md

Simpacker TypeScript example

Install packages

$ npm install --sav-dev typescript ts-loader

Edit webpack config

   entry: {
-    application: path.resolve(__dirname, "app/javascript/application.js")
+    application: path.resolve(__dirname, "app/javascript/application.ts")
   },
   output: {
     path: path.resolve(__dirname, "public/packs"),
@@ -16,7 +16,18 @@
     filename: isProd ? "[name]-[hash].js" : "[name].js"
   },
   resolve: {
-    extensions: [".js"]
+    extensions: [".js", ".ts"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true
+        }
+      }
+    ]
   },
   plugins: [new WebpackAssetsManifest({ publicPath: true })]
 };

Add files

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2019", "dom", "dom.iterable"],
    "module": "es2015",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "downlevelIteration": true,
    "sourceMap": true,
    "removeComments": false,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true
  }
}

app/javascript/application.ts

import { hello } from "./greeter";

document.addEventListener("DOMContentLoaded", () => {
  const el = document.getElementById("app");
  if (el) {
    el.textContent = hello("Rails");
  }
});

app/javascript/greeter.ts

export function hello(name: string): string {
  return `Hello ${name}!`;
}
You can’t perform that action at this time.