From 2ad3064111a43568c43559f5aacddf3e4f034ee3 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 5 Mar 2019 14:17:56 -0800 Subject: [PATCH] Add step2-01 final folder with solutions --- index.html | 2 +- step2-01/demo/README.md | 2 +- step2-01/exercise/README.md | 2 +- step2-01/exercise/src/index.ts | 7 ++- step2-01/final/README.md | 5 +++ step2-01/final/index.html | 14 ++++++ step2-01/final/src/fibonacci.ts | 6 +++ step2-01/final/src/index.ts | 77 +++++++++++++++++++++++++++++++++ step2-01/final/src/stack.ts | 15 +++++++ 9 files changed, 123 insertions(+), 7 deletions(-) create mode 100644 step2-01/final/README.md create mode 100644 step2-01/final/index.html create mode 100644 step2-01/final/src/fibonacci.ts create mode 100644 step2-01/final/src/index.ts create mode 100644 step2-01/final/src/stack.ts diff --git a/index.html b/index.html index a7eadb6..78df79d 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@
TypeScript Basics
- demo | exercise + demo | exercise | final
diff --git a/step2-01/demo/README.md b/step2-01/demo/README.md index b4f8860..9c64a37 100644 --- a/step2-01/demo/README.md +++ b/step2-01/demo/README.md @@ -1,6 +1,6 @@ # Step 2.1 - Introduction to TypeScript (Demo) -[Lessons](../../) | [Exercise](../exercise/) +[Lessons](../../) | [Exercise](../exercise/) | [Final](../final/) In this step, we'll cover enough TypeScript concepts to be productive with the React & Redux frameworks. diff --git a/step2-01/exercise/README.md b/step2-01/exercise/README.md index c4e0ad8..f6137bb 100644 --- a/step2-01/exercise/README.md +++ b/step2-01/exercise/README.md @@ -1,6 +1,6 @@ # Step 2.1 - Introduction to TypeScript (Exercise) -[Lessons](../../) | [Demo](../demo/) +[Lessons](../../) | [Demo](../demo/) | [Final](../final/) If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts index 53e19c2..c6507ef 100644 --- a/step2-01/exercise/src/index.ts +++ b/step2-01/exercise/src/index.ts @@ -1,7 +1,7 @@ // TODO: import the fib(n) function and the constant from './fibonacci.ts' -// import {fib}, FibConst from ... +// import FibConst, {fib} from ... -// TODO: import Stack from './stack.ts' +// TODO: import Stack from ... // Do the exercises here, outputting results using console.log() console.log('hello world'); @@ -54,11 +54,10 @@ function makePromise() { async function run() { // TODO: call makePromise() using await syntax and log the results - // TODO: call your new async function } run(); // Make this file a module so its code doesn't go in the global scope -export { }; \ No newline at end of file +export {}; diff --git a/step2-01/final/README.md b/step2-01/final/README.md new file mode 100644 index 0000000..005b33a --- /dev/null +++ b/step2-01/final/README.md @@ -0,0 +1,5 @@ +# Step 2.1 - Introduction to TypeScript (Final) + +[Lessons](../../) | [Demo](../demo/) | [Exercise](../exercise/) + +Look at the src folder for exercise solutions. diff --git a/step2-01/final/index.html b/step2-01/final/index.html new file mode 100644 index 0000000..3d990f4 --- /dev/null +++ b/step2-01/final/index.html @@ -0,0 +1,14 @@ + + + + + + +
+
+ Nothing to show here; just look at your console window for output. Hit F12 (cmd+option+I on Mac) to open the console + window. +
+ + + diff --git a/step2-01/final/src/fibonacci.ts b/step2-01/final/src/fibonacci.ts new file mode 100644 index 0000000..10b6182 --- /dev/null +++ b/step2-01/final/src/fibonacci.ts @@ -0,0 +1,6 @@ +export function fib(n: number) { + return n <= 1 ? n : fib(n - 1) + fib(n - 2); +} + +const FibConst: number = 3; +export default FibConst; diff --git a/step2-01/final/src/index.ts b/step2-01/final/src/index.ts new file mode 100644 index 0000000..237e81b --- /dev/null +++ b/step2-01/final/src/index.ts @@ -0,0 +1,77 @@ +import FibConst, { fib } from './fibonacci'; +import { Stack } from './stack'; + +console.log('hello world'); + +// ---- Modules ---- +console.log('fib(FibConst) is:', fib(FibConst)); + +// ---- Types and Interfaces ---- +type TrafficLight = 'red' | 'green' | 'yellow'; +const annoyingLight: TrafficLight = 'red'; + +interface Car { + wheels: number; + color: string; + make: string; + model: string; +} + +const myCar: Car = { + wheels: 4, + color: 'blue', + make: 'Toyota', + model: 'Camry' +}; +// JSON.stringify makes a nice string representation of an object +console.log('My car:', JSON.stringify(myCar)); + +// ---- Generics ---- +const myStack = new Stack(); +myStack.push(1); +myStack.push(2); +myStack.push(3); +console.log('Number on top of the stack:', myStack.pop()); + +// ---- Spread and Destructuring ---- +const obj1 = { + first: 'who', + second: 'what', + third: 'dunno', + left: 'why' +}; + +const obj2 = { + center: 'because', + pitcher: 'tomorrow', + catcher: 'today' +}; + +const megaObj = { ...obj1, ...obj2 }; + +const { first, second, catcher } = megaObj; +console.log('First:', first); +console.log('Second:', second); +console.log('Catcher:', catcher); + +// ---- Async / Await ---- +function makePromise(): Promise { + return Promise.resolve(5); +} + +async function getGreeting(name: string): Promise { + return 'hello ' + name; +} + +async function run() { + const result = await makePromise(); + console.log('makePromise returned:', result); + + const greeting = await getGreeting('Ken'); + console.log('greeting:', greeting); +} + +run(); + +// Make this file a module so its code doesn't go in the global scope +export {}; diff --git a/step2-01/final/src/stack.ts b/step2-01/final/src/stack.ts new file mode 100644 index 0000000..ff57280 --- /dev/null +++ b/step2-01/final/src/stack.ts @@ -0,0 +1,15 @@ +export class Stack { + private _store: T[]; + + constructor() { + this._store = []; + } + + push(elem: T): void { + this._store.push(elem); + } + + pop(): T { + return this._store.pop(); + } +}