adding exercies for steps 2-1 and 2-2

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 {};

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 {};

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';

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 {};

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

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

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

@@ -0,0 +1,19 @@
+import { namedConst, namedFn, namedObj, namedConstBracket, namedConst as c } from './named';
+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);
+
+import DefaultClass from './default';
+
+console.log(new DefaultClass().hello);

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

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

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 {};

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 {};