TypeScript examples

.gitignore

@@ -1,3 +1,5 @@
+/build/
+
 # Logs
 logs
 *.log
@@ -36,4 +38,5 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 
-.idea
+.idea
+

README.md

@@ -1,2 +1,22 @@
 # ts-superset-myth
 Experimenting with ES2015 -> TypeScript compatibility
+
+To get started:
+
+    npm install
+
+
+To compile the TypeScript:
+
+    npm run compile
+
+To load the examples in the browser:
+
+    npm start
+
+Then browse to `http://localhost:7005/`
+
+
+This example throws compilation errors even though the code is valid ES2016.
+
+Go to the branch `es2015` to see exactly the same code running with Babel/Webpack.

package.json

@@ -5,6 +5,7 @@
   "main": "src/app.js",
   "scripts": {
     "build": "webpack --display-reasons",
+    "compile": "tsc",
     "start": "webpack-dev-server --port 7005"
   },
   "repository": {
@@ -13,10 +14,12 @@
   },
   "homepage": "https://github.com/jbandi/ts-superset-myth#readme",
   "dependencies": {
-    "lodash": "4.13.1",
+    "lodash": "4.16.2",
     "ramda": "0.21.0"
   },
   "devDependencies": {
+    "@types/lodash": "4.14.36",
+    "ts-loader": "0.8.2",
     "typescript": "2.0.3",
     "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.8"

src/app.ts

@@ -0,0 +1,26 @@
+import {first, second, third} from './my-lib'
+import Car from './car';
+import {calculate} from './calculate'
+
+// Dynamically added properties are not valid in TypeScript
+console.log(first.name);
+console.log(second.organization);
+
+
+// TS does not support all cases of ES2015 destructuring
+const {name = 'John Doe', organization = 'Project Mayhem', message = 'Do not talk about superset!'} = third; // TS does not allow destructuring an obj to optional variables ...
+
+function doSomething({name = 'John Doe', organization = 'Project Mayhem', message = 'Do not talk about superset!'}){} // ... but it is valid to destructuring an object to optional function arguments ?!?
+doSomething(third);
+
+
+// ES2015 classes are not valid TypeScript classes
+const myCar = new Car(42);
+console.log(myCar.weight);
+
+// ES2015 modules (as WebPack understands them), are not valid TypeScript modules
+const result = calculate([1,2,3]);
+console.log(result);
+
+console.log('Hello from TypeScript!');
+

src/calculate.ts

@@ -0,0 +1,6 @@
+import map from 'lodash/map';
+// import {map} from 'lodash';
+
+export function calculate(input: Array<number>){
+    return map(input, n => n + 3);
+}

src/car.ts

@@ -0,0 +1,5 @@
+export default class Car {
+    constructor(private weight) {
+        this.weight = weight;
+    }
+}

src/my-lib.ts

@@ -0,0 +1,18 @@
+const first = {};
+
+first.name = 'Tyler Durden';
+
+//
+const prop = 'organization';
+const second = {
+    name: 'Tyler Durden',
+    [prop]: 'Fight Club'
+};
+
+const third = {
+    name: 'Tyler Durden',
+    organization: 'Fight Club'
+};
+
+
+export {first, second, third}

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "sourceMap": true,
+    "allowJs": true,
+    "outDir": "build"
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

webpack.config.js

@@ -12,9 +12,9 @@ module.exports = {
     },
     module: {
         loaders: [
-            {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
+            // {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
             // {test: /\.js$/, loader: 'babel'},
-            // {test: /\.ts$/, loader: 'awesome-typescript', exclude: /node_modules/}
+            {test: /\.ts$/, loader: 'ts', exclude: /node_modules/}
         ]
     }
 };