adding docs subtree

docs/step2-01/README.md

@@ -0,0 +1,204 @@
+# Step 2.1: Introduction to Typescript
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+In this step, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks.
+
+Topics in this step will include:
+
+- ES modules
+- Basic Types
+- Interfaces & Classes
+- Basic Generics
+- Spread and Destructuring
+- Async / Await
+
+## Modules
+
+Historically, JS is only executed in browser. The code all had to be loaded from `<script>` tags. Since the introduction of node.js, the JS community needed a way to scale beyond just single script files. Other language support the notion of modules. There are many JS modularity standards today.
+
+The most important ones to know about are:
+
+- commonjs - Node.js's standard to support modules
+  - synchronous
+  - require() function, can be dynamically called in the course of a program
+- ESM (Ecmascript module) - language level support
+  - statically analyzable and synchronous
+  - dynamic and asynchronous support via `import()` that returns a promise
+
+## Typescript Types
+
+Refer to the `demo/src` for some examples of some of the types avaible in TS that benefits a React developer.
+
+## Spread Syntax
+
+Spread syntax allows for quick way to clone and concatenate objects and arrays. This syntax is seen a lot inside React props and Redux reducers.
+
+To shallow copy something:
+
+```ts
+const cloned = { ...obj };
+```
+
+To shallow copy and add / overwrite a key:
+
+```ts
+const overridden = { ...obj, key: value };
+```
+
+You can have an expression to calculate this key if it is dynamic:
+
+```ts
+const overridden = { ...object, [key + '-suffix']: value };
+```
+
+## Destructuring
+
+Destructuring is a concise way to take properties out of an object or array:
+
+```ts
+const obj = { foo: 1, bar: 2 };
+const { foo, bar } = obj;
+// foo = 1, bar = 2
+```
+
+Same thing for array:
+
+```ts
+const arr = [1, 2];
+const [foo, bar] = arr;
+// foo = 1, bar = 2
+```
+
+You can separate an item and the rest of the object with destructuring:
+
+```ts
+const obj = { a: 1, b: 2, c: 3, d: 4 };
+const { a, ...rest } = obj;
+// a = 1, rest = {b: 2, c: 3, d: 4}
+```
+
+# Promise
+
+A promise is an object that represent work that will be completed later, asynchronously. It is a chainable so writing async code is maintainable. Typically legacy async code uses callback to let the caller have control over what to do after the task has been completed.
+
+```ts
+const aPromise = new Promise((resolve, reject) => {
+  // do something async and call resolve() to let promise know it is done
+
+  setTimeout(() => {
+    // setTimeout will call this method after 1s, simulating async operation like network calls
+    resolve();
+  }, 1000);
+});
+```
+
+The promise object exposes a `then()` function that is chainable. `catch()` is present that catches all exceptions or `reject()` calls:
+
+```ts
+const aPromise = Promise.resolve('hello world'); /* ... just an example promise */
+
+aPromise
+  .then(result => {
+    return makeAnotherPromise();
+  })
+  .then(result => {
+    return makeYetAnotherPromise();
+  })
+  .catch(err => {
+    console.error(err);
+  });
+```
+
+# Async / Await
+
+This syntax is inspired heavily by C#'s async / await syntax. To write an async function write it like this:
+
+```ts
+async function someFunctionAsync() {
+  // Inside here, we can await on other async functions
+  const result = await someOtherFunctionAsync();
+  return result + ' hello';
+}
+```
+
+All functions that are marked `async` return a `Promise` automatically. This previous example returned a `Promise<string>`, and can be used like this:
+
+```ts
+someFunctionAsync().then(result => {
+  console.log(result);
+});
+```
+
+# Exercise
+
+Please complete all exercises inside the `exercise/src` folder unless otherwise specified in the exercises below. First, open up [Step2-01 exercise page](http://localhost:8080/step2-01/exercise/) to see the results while you're implementing things.
+
+## Modules
+
+1. Open up file called `index.ts` in VS Code
+
+2. Create another module file called `fibonacci.ts`
+
+3. Inside the file from (step 2), write a function called `fib(n)` that takes in a number and returns a the n-th Fibonacci number - be sure the specify the type of n
+
+> HINT: fib(n) = fib(n - 1) + fib(n - 2); fib(n <= 1) = n;
+
+4. Export `fib(n)` as a **named export**
+
+5. Export another const variable as a **default export**
+
+6. Import both the modules created in steps (4) and (5) and use the provided `log()` function to log it onto the page.
+
+## Types, Interfaces, and Classes
+
+Create inside `index.ts`:
+
+1. a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
+
+2. describe a type of car with an interface: `interface Car { ... }`
+
+## Generic
+
+Inside `stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods
+
+> Hint: the Javascript array already has `push()` and `pop()` implemented for you. That can be your backing store.
+
+Be sure to use the provided `log()` to show the functionality of `Stack<T>`
+
+## Spread and Destructure
+
+1. Note the following code in index.ts:
+
+```ts
+const obj1 = {
+  first: 'who',
+  second: 'what',
+  third: 'dunno',
+  left: 'why'
+};
+
+const obj2 = {
+  center: 'because',
+  pitcher: 'tomorrow',
+  catcher: 'today'
+};
+```
+
+2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable that combines these two objects.
+
+3. Using the destructuring syntax to retrieve the values for `{first, second, catcher}` from this new object created in step (2).
+
+## Async / Await
+
+1. Note the following code in index.ts:
+
+```ts
+function makePromise() {
+  return Promise.resolve(5);
+}
+```
+
+2. call `makePromise()` with the `await` syntax and log the results using the provided `log()` function
+
+3. create a new function that uses the `async` keyword to create an async function. Make an await call to `makePromise()` and return the results

docs/step2-01/demo/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><link rel="stylesheet" href="../../assets/step.css"></head><body class="ms-Fabric"><div id="markdownReadme"></div><div id="app">Nothing to show here, just look at your console window for output. Hit F12 to open console window.</div><script src="../../step2-01/demo/step2-01/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

docs/step2-01/demo/src/async/index.ts

@@ -0,0 +1,12 @@
+async function fetchSomething() {
+  const response = await fetch('http://localhost:3000/hello');
+  return await response.text();
+}
+
+// Async functions always returns Promise
+fetchSomething().then(text => {
+  console.log('hello ' + text);
+});
+
+// adding an export to turn this into a "module"
+export default {};

docs/step2-01/demo/src/generics/index.ts

@@ -0,0 +1,23 @@
+// Generics for classes
+class Stack<T = number> {
+  private data: T[] = [];
+
+  push(item: T) {
+    this.data.push(item);
+  }
+  pop(): T {
+    return this.data.pop();
+  }
+}
+
+const numberStack = new Stack();
+const stringStack = new Stack<string>();
+
+// Generics for functions
+function reverse<T>(arg: T[]): T[] {
+  // TODO: implement the logic to reverse the array
+  return arg;
+}
+
+// adding an export to turn this into a "module"
+export default {};

docs/step2-01/demo/src/index.tsx

@@ -0,0 +1,19 @@
+// Interesting Typescript Topics
+
+// types
+import './types';
+
+// interface
+import './interfaces';
+
+// modularity
+import './modules';
+
+// generics
+import './generics';
+
+// await / async
+import './async';
+
+// spread syntax
+import './spread';

docs/step2-01/demo/src/interfaces/index.ts

@@ -0,0 +1,22 @@
+interface Car {
+  make: string;
+  model: string;
+}
+
+class MyCar implements Car {
+  make: 'Honda';
+  model: 'Accord';
+}
+
+const myCar: Car = {
+  make: 'Honda',
+  model: 'Accord'
+};
+
+// Interface as Functions
+interface InterestingFn {
+  (someArgs: string): number;
+}
+
+// adding an export to turn this into a "module"
+export default {};

docs/step2-01/demo/src/modules/default.ts

@@ -0,0 +1,3 @@
+export default class DefaultClass {
+  hello = 'world';
+}

docs/step2-01/demo/src/modules/index.ts

@@ -0,0 +1,28 @@
+// These are named imports from a file relative to this file
+import { namedConst, namedFn, namedObj, namedConstBracket } from './named';
+
+// We can even apply an alias to the named constant
+import { namedConst as c } from './named';
+
+// These are the same instances of the named imports, but gets imported all at the same time under a single object
+import * as named from './named';
+
+// Print out the exports
+console.log(namedConst);
+console.log(c);
+console.log(namedFn());
+console.log(namedObj);
+console.log(namedConstBracket);
+
+// Print out exports through module level import
+console.log(named.namedConst);
+console.log(named.namedFn());
+console.log(named.namedObj);
+console.log(named.namedConstBracket);
+
+// Default import can be named anything we want as the consumer
+import DefaultClass from './default';
+import Foo from './default';
+
+console.log(new DefaultClass().hello);
+console.log(new Foo().hello);

docs/step2-01/demo/src/modules/named.ts

@@ -0,0 +1,13 @@
+export const namedConst = 5;
+
+export function namedFn() {
+  return 5;
+}
+
+export const namedObj = {
+  hello: 'world'
+};
+
+const namedConstBracket = 10;
+
+export { namedConstBracket };

docs/step2-01/demo/src/spread/index.ts

@@ -0,0 +1,24 @@
+// Destructuring
+var [a, b, ...rest] = [1, 2, 3, 4];
+console.log(a, b, rest); // 1,2,[3,4]
+
+// Array assignment
+var list = [1, 2];
+list = [...list, 3, 4];
+console.log(list); // [1,2,3,4]
+
+// Object assignment
+const point2D = { x: 1, y: 2 };
+const point3D = { ...point2D, z: 3 };
+
+// Concat two objects
+const obj1 = { x: 1 };
+const obj2 = { y: 2 };
+
+const obj3 = { ...obj1, ...obj2 };
+
+// Destructuring object
+const { x } = obj3;
+
+// adding an export to turn this into a "module"
+export default {};

docs/step2-01/demo/src/types/index.ts

@@ -0,0 +1,59 @@
+// Basic Types
+let isDone: boolean = false;
+let decimal: number = 6;
+let color: string = 'blue';
+let sky: string = `the sky is ${color}`;
+
+// Function Types
+type FibFn = (n: number) => number;
+
+// Object Types
+type Obj = {
+  [key: string]: string;
+};
+
+// Object with Specified Keys
+type Specific1 = {
+  foo: string;
+  bar: number;
+  common: string;
+};
+
+type Specific2 = {
+  alice: string;
+  bob: number;
+  common: number;
+};
+
+// composition
+type TypeOfObj = {
+  foo: string;
+  bar: number;
+  obj1: Specific1;
+  obj2: Specific2;
+};
+
+// Get types by property
+type Obj1Type = TypeOfObj['obj1'];
+
+// union, intersection
+type Union = Specific1 | Specific2;
+type Intersection = Specific1 & Specific2;
+
+// casting
+let choose1 = <Specific1>{ common: '5' };
+
+// string literal union
+type CatStatus = 'alive' | 'dead' | 'both';
+
+// Classes
+class Animal {}
+
+// Illustration purposes only
+// In real apps, avoid inheritance if possible
+// noted exception: React.Component with react@<16.8.0
+class Cat extends Animal {}
+class Dog extends Animal {}
+
+// adding an export to turn this into a "module"
+export default {};

docs/step2-01/demo/step2-01/demo.js

@@ -0,0 +1,2 @@
+!function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(o,r,function(t){return n[t]}.bind(null,r));return o},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=127)}({127:function(n,t,e){"use strict";e.r(t);var o,r=(o=function(n,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,t){n.__proto__=t}||function(n,t){for(var e in t)t.hasOwnProperty(e)&&(n[e]=t[e])})(n,t)},function(n,t){function e(){this.constructor=n}o(n,t),n.prototype=null===t?Object.create(t):(e.prototype=t.prototype,new e)}),l=function(){return function(){}}();(function(n){function t(){return null!==n&&n.apply(this,arguments)||this}r(t,n)})(l),function(n){function t(){return null!==n&&n.apply(this,arguments)||this}r(t,n)}(l);var u={hello:"world"},c=function(){return function(){this.hello="world"}}();console.log(5),console.log(5),console.log(5),console.log(u),console.log(10),console.log(5),console.log(5),console.log(u),console.log(10),console.log((new c).hello),console.log((new c).hello);var i=function(){function n(){this.data=[]}return n.prototype.push=function(n){this.data.push(n)},n.prototype.pop=function(){return this.data.pop()},n}();new i,new i;var a=function(n,t,e,o){return new(e||(e=Promise))(function(r,l){function u(n){try{i(o.next(n))}catch(n){l(n)}}function c(n){try{i(o.throw(n))}catch(n){l(n)}}function i(n){n.done?r(n.value):new e(function(t){t(n.value)}).then(u,c)}i((o=o.apply(n,t||[])).next())})},f=function(n,t){var e,o,r,l,u={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return l={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function c(l){return function(c){return function(l){if(e)throw new TypeError("Generator is already executing.");for(;u;)try{if(e=1,o&&(r=2&l[0]?o.return:l[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,l[1])).done)return r;switch(o=0,r&&(l=[2&l[0],r.value]),l[0]){case 0:case 1:r=l;break;case 4:return u.label++,{value:l[1],done:!1};case 5:u.label++,o=l[1],l=[0];continue;case 7:l=u.ops.pop(),u.trys.pop();continue;default:if(!(r=(r=u.trys).length>0&&r[r.length-1])&&(6===l[0]||2===l[0])){u=0;continue}if(3===l[0]&&(!r||l[1]>r[0]&&l[1]<r[3])){u.label=l[1];break}if(6===l[0]&&u.label<r[1]){u.label=r[1],r=l;break}if(r&&u.label<r[2]){u.label=r[2],u.ops.push(l);break}r[2]&&u.ops.pop(),u.trys.pop();continue}l=t.call(n,u)}catch(n){l=[6,n],o=0}finally{e=r=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}};(function(){return a(this,void 0,void 0,function(){return f(this,function(n){switch(n.label){case 0:return[4,fetch("http://localhost:3000/hello")];case 1:return[4,n.sent().text()];case 2:return[2,n.sent()]}})})})().then(function(n){console.log("hello "+n)});var s=function(){return(s=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}).apply(this,arguments)},p=[1,2,3,4],h=p[0],y=p[1],b=p.slice(2);console.log(h,y,b);var d=[1,2];d=d.concat([3,4]),console.log(d);s({},{x:1,y:2},{z:3}),s({},{x:1},{y:2}).x}});
+//# sourceMappingURL=demo.js.map

docs/step2-01/exercise/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><link rel="stylesheet" href="../../assets/step.css"></head><body class="ms-Fabric"><div id="markdownReadme"></div><div id="app">Nothing to show here, just look at your console window for output. Hit F12 to open console window.</div><script src="../../step2-01/exercise/step2-01/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

docs/step2-01/exercise/src/index.ts

@@ -0,0 +1,28 @@
+// Some setup code for exercises
+const obj1 = {
+  first: 'who',
+  second: 'what',
+  third: 'dunno',
+  left: 'why'
+};
+
+const obj2 = {
+  center: 'because',
+  pitcher: 'tomorrow',
+  catcher: 'today'
+};
+
+function makePromise() {
+  return Promise.resolve(5);
+}
+
+// Do the exercises here, output your results with "console.log()" function
+// ...
+console.log('hello world');
+
+async function run() {
+  // Place your code for the async / await exercise here
+  // ...
+}
+
+run();

docs/step2-01/exercise/src/stack.ts

@@ -0,0 +1,10 @@
+// TODO: create a Stack<T> generic class here:
+
+/**
+ *
+ *  export class Stack<T> {
+ *    push(...) { ... }
+ *    pop(...) { ... }
+ *  }
+ *
+ */

docs/step2-01/exercise/step2-01/exercise.js

@@ -0,0 +1,2 @@
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=121)}({121:function(e,t){var n=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))(function(o,u){function i(e){try{a(r.next(e))}catch(e){u(e)}}function l(e){try{a(r.throw(e))}catch(e){u(e)}}function a(e){e.done?o(e.value):new n(function(t){t(e.value)}).then(i,l)}a((r=r.apply(e,t||[])).next())})},r=this&&this.__generator||function(e,t){var n,r,o,u,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function l(u){return function(l){return function(u){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return i.label++,{value:u[1],done:!1};case 5:i.label++,r=u[1],u=[0];continue;case 7:u=i.ops.pop(),i.trys.pop();continue;default:if(!(o=(o=i.trys).length>0&&o[o.length-1])&&(6===u[0]||2===u[0])){i=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){i.label=u[1];break}if(6===u[0]&&i.label<o[1]){i.label=o[1],o=u;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(u);break}o[2]&&i.ops.pop(),i.trys.pop();continue}u=t.call(e,i)}catch(e){u=[6,e],r=0}finally{n=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,l])}}};console.log("hello world"),function(){n(this,void 0,void 0,function(){return r(this,function(e){return[2]})})}()}});
+//# sourceMappingURL=exercise.js.map