await async

server/index.js

@@ -33,6 +33,10 @@ app.post('/todos', req => {
   store.todos = req.body;
 });
 
+app.get('/hello', (req, res) => {
+  res.send('world');
+});
+
 app.listen(process.env.NODE_ENV === 'production' ? undefined : 3000, () => {
   console.log('Listening at http://localhost:3000');
 });

step2-01/src/async/index.ts

@@ -0,0 +1,8 @@
+async function fetchSomething() {
+  const response = await fetch('http://localhost:3000/hello');
+  return await response.text();
+}
+
+fetchSomething().then(text => {
+  console.log('hello ' + text);
+});

step2-01/src/generics/index.ts

@@ -0,0 +1,20 @@
+// 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;
+}

step2-01/src/index.tsx

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

step2-01/src/interfaces/index.ts

@@ -0,0 +1,19 @@
+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;
+}

step2-01/src/spread/index.ts

@@ -0,0 +1,12 @@
+// Destructuring
+var [x, y, ...rest] = [1, 2, 3, 4];
+console.log(x, y, 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 };

step2-01/src/types/index.ts

@@ -0,0 +1,52 @@
+// 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;
+  obj: Specific1;
+};
+
+// 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 {}