Merge branch 'master' of https://github.com/kenotron/bootcamp

step2-01/README.md

@@ -1,8 +1,8 @@
 # Step 2.1: Introduction to Typescript
 
-In this exercise, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks.
+In this step, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks.
 
-Topics in this Exercise will include:
+Topics in this step will include:
 
 - ES modules
 - Basic Types
@@ -11,6 +11,123 @@ Topics in this Exercise will include:
 - 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.

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

@@ -1,4 +1,10 @@
-import { namedConst, namedFn, namedObj, namedConstBracket, namedConst as c } from './named';
+// 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
@@ -14,6 +20,9 @@ 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);

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

@@ -9,4 +9,5 @@ export const namedObj = {
 };
 
 const namedConstBracket = 10;
+
 export { namedConstBracket };