Use babel to transpile.

Author: tai2

.babelrc

@@ -17,6 +17,7 @@
     "syntax-dynamic-import",
     ["transform-class-properties", { "spec": true }],
     ["transform-object-rest-spread", {"useBuiltIns": true}],
-    "lodash"
+    "lodash",
+    "react-hot-loader/babel"
   ]
 }

app/assets/javascripts/application.ts

@@ -1,4 +1,4 @@
-import 'core-js/shim'
+import 'babel-polyfill'
 import 'javascripts/change-query'
 import * as Rails from 'rails-ujs'
 

app/assets/javascripts/change-query.ts

@@ -6,7 +6,7 @@ function prepereSelectElems(): void {
   ) as NodeListOf<HTMLSelectElement>
   const query = queryString.parse(location.search)
 
-  for (const select of Array.from(doms)) {
+  for (const select of doms) {
     if (query.sort_by) {
       select.value = query.sort_by
     }
@@ -23,7 +23,7 @@ function prepereCheckboxElems(): void {
   ) as NodeListOf<HTMLInputElement>
   const query = queryString.parse(location.search)
 
-  for (const checkbox of Array.from(doms)) {
+  for (const checkbox of doms) {
     checkbox.checked = query.done && query.done !== 'false'
     checkbox.addEventListener('change', () => {
       query.done = checkbox.checked

app/assets/javascripts/todos/package.json

@@ -10,7 +10,7 @@ export interface Todo {
 export class IdentifiableError extends Error {
   constructor(readonly targetId: number, message?: string) {
     super(message)
-    Object.setPrototypeOf(this, new.target.prototype)
+    Object.setPrototypeOf(this, this.constructor.prototype) // restore prototype chain
     this.name = 'IdentifiableError'
   }
 }

app/assets/javascripts/todos/types/index.ts

@@ -0,0 +1,43 @@
+var fs = require('fs');
+var path = require('path');
+
+var ts = require('typescript');
+
+var pattern = 'test/**/*.@(ts|tsx)';
+var cwd = process.cwd();
+var packageData = require(path.join(cwd, 'package.json'));
+
+if (packageData &&
+    typeof packageData.directories === 'object' &&
+    typeof packageData.directories.test === 'string') {
+  var testDir = packageData.directories.test;
+  pattern = testDir + ((testDir.lastIndexOf('/', 0) === 0) ? '' : '/') + '**/*.@(ts|tsx)';
+}
+
+var tsconfigPath = ts.findConfigFile(cwd, fs.existsSync, 'tsconfig.test.json');
+var tsconfigBasepath = null;
+var compilerOptions = null;
+if (tsconfigPath) {
+  compilerOptions = parseTsConfig(tsconfigPath);
+  tsconfigBasepath = path.dirname(tsconfigPath);
+}
+
+require('espower-typescript')({
+    cwd: cwd,
+    pattern: pattern,
+    compilerOptions: compilerOptions,
+    basepath: tsconfigBasepath
+});
+
+function parseTsConfig(tsconfigPath) {
+  var parsed = ts.parseConfigFileTextToJson(tsconfigPath, fs.readFileSync(tsconfigPath, 'utf8'));
+  if (parsed.error) {
+    throw new Error(parsed.error.messageText);
+  }
+
+  if (!parsed.config || !parsed.config.compilerOptions) {
+    return null;
+  }
+
+  return parsed.config.compilerOptions;
+}

config/espower-typescript.js

@@ -21,10 +21,7 @@ function enableCssModules(cssLoader) {
 environment.loaders.set('typescript', {
   test: /\.tsx?$/,
   exclude: /node_modules/,
-  loader: [
-    'react-hot-loader/webpack',
-    'awesome-typescript-loader'
-  ]
+  loader: 'awesome-typescript-loader'
 })
 
 // Limit this loader to specific paths

config/webpack/environment.js

@@ -4,7 +4,7 @@
   "scripts": {
     "lint": "tslint -c tslint.json 'app/**/*.ts' 'app/**/*.tsx'",
     "lint:fix": "tslint -c tslint.json 'app/**/*.ts' '**/*.tsx' --fix",
-    "test": "mocha --require espower-typescript/guess **/*.spec.{ts,tsx}",
+    "test": "mocha --require ./config/espower-typescript.js **/*.spec.{ts,tsx}",
     "storybook": "start-storybook -p 6006",
     "prettier": "prettier --single-quote --trailing-comma=es5 --no-semi --write '**/*.ts' --write '**/*.tsx'",
     "precommit-check": "npm run prettier && npm run lint && npm run test"
@@ -25,11 +25,11 @@
     "autoprefixer": "^7.1.1",
     "awesome-typescript-loader": "^3.2.3",
     "babel-plugin-lodash": "^3.2.11",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-react": "^6.24.1",
     "bootstrap": "^3.3.7",
     "classnames": "^2.2.5",
     "coffeescript": "^2.0.1",
-    "core-js": "^2.5.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "query-string": "^4.3.4",

package.json

@@ -3,16 +3,16 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "target": "es5",
+    "target": "esnext",
     "moduleResolution": "node",
-    "jsx": "react",
-    "lib": ["dom", "es6"]
+    "jsx": "preserve"
   },
   "include": [
     "./app/assets/javascripts/**/*",
     "./app/assets/packs/**/*"
   ],
   "awesomeTypescriptLoaderOptions": {
+    "useBabel": true,
     "useCache": true
   }
 }

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}