From ac9e68e0456caf6b5f8ccc77ab5722a259a11b4e Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 18 Feb 2019 14:45:00 -0800 Subject: [PATCH] added some exercise bits to step 2.1 --- step2-01/README.md | 89 +++++++++++++++++++++-- step2-01/exercise/index.html | 14 ++++ step2-01/exercise/src/async/index.ts | 12 --- step2-01/exercise/src/generics/index.ts | 23 ------ step2-01/exercise/src/index.ts | 34 +++++++++ step2-01/exercise/src/index.tsx | 19 ----- step2-01/exercise/src/interfaces/index.ts | 22 ------ step2-01/exercise/src/modules/default.ts | 3 - step2-01/exercise/src/modules/index.ts | 19 ----- step2-01/exercise/src/modules/named.ts | 12 --- step2-01/exercise/src/spread/index.ts | 15 ---- step2-01/exercise/src/types/index.ts | 55 -------------- step2-01/src/spread/index.ts | 13 +++- step2-01/src/types/index.ts | 8 +- 14 files changed, 149 insertions(+), 189 deletions(-) delete mode 100644 step2-01/exercise/src/async/index.ts delete mode 100644 step2-01/exercise/src/generics/index.ts create mode 100644 step2-01/exercise/src/index.ts delete mode 100644 step2-01/exercise/src/index.tsx delete mode 100644 step2-01/exercise/src/interfaces/index.ts delete mode 100644 step2-01/exercise/src/modules/default.ts delete mode 100644 step2-01/exercise/src/modules/index.ts delete mode 100644 step2-01/exercise/src/modules/named.ts delete mode 100644 step2-01/exercise/src/spread/index.ts delete mode 100644 step2-01/exercise/src/types/index.ts diff --git a/step2-01/README.md b/step2-01/README.md index 31b3ed6..6bb1042 100644 --- a/step2-01/README.md +++ b/step2-01/README.md @@ -1,8 +1,87 @@ # Step 2.1 -Typescript +## Introduction to Typescript -- ES6 modules review -- a look at types -- defining interfaces -- +In this exercise, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks. + +Topics in this Exercise will include: + +- ES modules +- Basic Types +- Interfaces & Classes +- Basic Generics +- Spread and Destructuring +- Async / Await + +## 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 + +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 + +2. a class hierarchy of your favorite metaphor (e.g. family, autombiles, animals) + +3. describe an object type with an interface + +### Generic + +Inside `index.ts`, create a generic class for a `Stack` 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` + +### 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 diff --git a/step2-01/exercise/index.html b/step2-01/exercise/index.html index 454cef5..0807af1 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -1,5 +1,19 @@ + + +
diff --git a/step2-01/exercise/src/async/index.ts b/step2-01/exercise/src/async/index.ts deleted file mode 100644 index c4a34fe..0000000 --- a/step2-01/exercise/src/async/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -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 {}; diff --git a/step2-01/exercise/src/generics/index.ts b/step2-01/exercise/src/generics/index.ts deleted file mode 100644 index 95e5093..0000000 --- a/step2-01/exercise/src/generics/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -// Generics for classes -class Stack { - private data: T[] = []; - - push(item: T) { - this.data.push(item); - } - pop(): T { - return this.data.pop(); - } -} - -const numberStack = new Stack(); -const stringStack = new Stack(); - -// Generics for functions -function reverse(arg: T[]): T[] { - // TODO: implement the logic to reverse the array - return arg; -} - -// adding an export to turn this into a "module" -export default {}; diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts new file mode 100644 index 0000000..c3a0fed --- /dev/null +++ b/step2-01/exercise/src/index.ts @@ -0,0 +1,34 @@ +const app = document.getElementById('app'); +const textarea = document.createElement('textarea'); +textarea.setAttribute('readonly', 'true'); +app.appendChild(textarea); +function log(results: string) { + textarea.innerText += results; +} + +// 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 "log()" function +// ... +log('hello world'); + +(async () => { + // Place your code for the async / await exercise here + // ... +})(); diff --git a/step2-01/exercise/src/index.tsx b/step2-01/exercise/src/index.tsx deleted file mode 100644 index 41d949e..0000000 --- a/step2-01/exercise/src/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -// Interesting Typescript Topics - -// types -import './types'; - -// interface -import './interfaces'; - -// modularity -import './modules'; - -// generics -import './generics'; - -// await / async -import './async'; - -// spread syntax -import './spread'; diff --git a/step2-01/exercise/src/interfaces/index.ts b/step2-01/exercise/src/interfaces/index.ts deleted file mode 100644 index 88e2f17..0000000 --- a/step2-01/exercise/src/interfaces/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -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 {}; diff --git a/step2-01/exercise/src/modules/default.ts b/step2-01/exercise/src/modules/default.ts deleted file mode 100644 index 6a9f1db..0000000 --- a/step2-01/exercise/src/modules/default.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default class DefaultClass { - hello = 'world'; -} diff --git a/step2-01/exercise/src/modules/index.ts b/step2-01/exercise/src/modules/index.ts deleted file mode 100644 index fb47500..0000000 --- a/step2-01/exercise/src/modules/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -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); diff --git a/step2-01/exercise/src/modules/named.ts b/step2-01/exercise/src/modules/named.ts deleted file mode 100644 index 3560907..0000000 --- a/step2-01/exercise/src/modules/named.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const namedConst = 5; - -export function namedFn() { - return 5; -} - -export const namedObj = { - hello: 'world' -}; - -const namedConstBracket = 10; -export { namedConstBracket }; diff --git a/step2-01/exercise/src/spread/index.ts b/step2-01/exercise/src/spread/index.ts deleted file mode 100644 index addce19..0000000 --- a/step2-01/exercise/src/spread/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -// 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 }; - -// adding an export to turn this into a "module" -export default {}; diff --git a/step2-01/exercise/src/types/index.ts b/step2-01/exercise/src/types/index.ts deleted file mode 100644 index a89f240..0000000 --- a/step2-01/exercise/src/types/index.ts +++ /dev/null @@ -1,55 +0,0 @@ -// 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 = { 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 {}; diff --git a/step2-01/src/spread/index.ts b/step2-01/src/spread/index.ts index addce19..be53c49 100644 --- a/step2-01/src/spread/index.ts +++ b/step2-01/src/spread/index.ts @@ -1,6 +1,6 @@ // Destructuring -var [x, y, ...rest] = [1, 2, 3, 4]; -console.log(x, y, rest); // 1,2,[3,4] +var [a, b, ...rest] = [1, 2, 3, 4]; +console.log(a, b, rest); // 1,2,[3,4] // Array assignment var list = [1, 2]; @@ -11,5 +11,14 @@ console.log(list); // [1,2,3,4] 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 {}; diff --git a/step2-01/src/types/index.ts b/step2-01/src/types/index.ts index a89f240..508b67e 100644 --- a/step2-01/src/types/index.ts +++ b/step2-01/src/types/index.ts @@ -26,12 +26,16 @@ type Specific2 = { }; // composition -type typeofObj = { +type TypeOfObj = { foo: string; bar: number; - obj: Specific1; + obj1: Specific1; + obj2: Specific2; }; +// Get types by property +type Obj1Type = TypeOfObj['obj1']; + // union, intersection type Union = Specific1 | Specific2; type Intersection = Specific1 & Specific2;