Typescript

package.json

@@ -22,6 +22,8 @@
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-webpack": "^2.0.2",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.1",
     "webpack": "~> 2.2.1",
     "webpack-dev-server": "~> 2.2.1"
   }

spec/example-spec.js

@@ -1,4 +1,4 @@
-import App from 'app/app'
+import { App } from 'app/app'
 
 describe('An example test', () => {
   it('runs specs correctly', () => {

src/app.js → src/app.ts

@@ -1,4 +1,6 @@
 class App {
+  _element: HTMLElement
+
   constructor() {
     this._element = document.getElementsByTagName('body')[0]
   }
@@ -9,4 +11,4 @@ class App {
   }
 }
 
-export default App
+export { App }

src/index.ts

@@ -0,0 +1,3 @@
+import { App } from './app'
+
+new App().run()

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "target": "ES5"
+  }
+}

webpack/webpack.config.base.js

@@ -1,7 +1,7 @@
 const path = require('path')
 
 const config = {
-  entry: ['./src/index.js'],
+  entry: ['./src/index.ts'],
   output: {
     path: path.resolve(__dirname, '..', 'dist'),
     filename: 'bundle.js',
@@ -25,8 +25,17 @@ const config = {
             presets: ['es2015']
           }
         }
+      }, {
+        test: /\.ts$/,
+        include: path.resolve(__dirname, '..', 'src'),
+        use: {
+          loader: 'ts-loader'
+        }
       }
     ]
+  },
+  resolve: {
+    extensions: ['.js', '.ts']
   }
 };
 

webpack/webpack.config.test.js

@@ -17,13 +17,20 @@ const config = {
             presets: ['es2015']
           }
         }
+      }, {
+        test: /\.ts$/,
+        include: path.resolve(__dirname, '..', 'src'),
+        use: {
+          loader: 'ts-loader'
+        }
       }
     ]
   },
   resolve: {
     alias: {
       'app': path.resolve(__dirname, '..', 'src')
-    }
+    },
+    extensions: ['.js', '.ts']
   }
 };
 

yarn.lock

@@ -914,7 +914,7 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-colors@^1.1.0:
+colors@^1.0.3, colors@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
@@ -3317,7 +3317,7 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
-"semver@2 || 3 || 4 || 5", semver@~5.3.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -3715,6 +3715,15 @@ tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
+ts-loader@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.0.3.tgz#89b8c87598f048df065766e07e1538f0eaeb1165"
+  dependencies:
+    colors "^1.0.3"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    semver "^5.0.1"
+
 [email protected]:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -3746,6 +3755,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.1.tgz#4862b662b988a4c8ff691cc7969622d24db76ae9"
+
 uglify-js@^2.7.5:
   version "2.8.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.10.tgz#bd0be568369f7be8cad2a4161fa90ada118ef73a"