Merge pull request #49 from ecraig12345/exercises

Step2-01 exercise changes
This commit is contained in:
Kenneth Chau
2019-02-28 15:15:42 -08:00
committed by GitHub
4 changed files with 50 additions and 26 deletions

View File

@@ -1,4 +1,4 @@
# Types and Creating a UI Driven State
# Types and Creating a UI-Driven State
Now that we have a UI that is purely driven by the state of our app, we need to add functionality to allow the UI to drive the state. This is often done by creating functions that call `setState` like we saw in the `TodoHeader`. Values from the state are then passed down to the UI as props.

View File

@@ -167,35 +167,35 @@ Exercises will be completed under this step's `exercise/src` folder unless other
## Modules
1. Open the file `exercise/src/index.ts` in VS Code
1. Open the file `exercise/src/fibonacci.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 the `n`-th Fibonacci number (be sure the specify the type of `n`).
2. Inside this file, write a function called `fib(n)` that takes in a number and returns the `n`-th Fibonacci number (be sure the specify the type of `n`).
> HINT: `function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); }`
4. Export `fib(n)` as a **named export**
3. Export `fib(n)` as a **named export**
5. Export another const variable as a **default export**
4. Export a const variable `FibConst` as a **default export**
6. Inside `index.ts`, import both of the modules created in steps (4) and (5) and use the built-in `console.log()` function to log the result of `fib(FibConst)`.
5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`.
## Types and Interfaces
Inside `index.ts`:
Inside `exercise/src/index.ts`:
1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model`
3. Create a valid car instance and log it using `console.log()`: `const myCar: Car = { ??? }`;
## Generics
Inside `stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods.
Inside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` 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 built-in `console.log()` to show the functionality of `Stack<T>`.
In `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.
## Spread and Destructuring
@@ -216,9 +216,9 @@ const obj2 = {
};
```
2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable that combines these two objects.
2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable `megaObj` that combines these two objects.
3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from the new object created in step (2).
3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.
## Async / Await
@@ -230,6 +230,6 @@ function makePromise() {
}
```
1. Call `makePromise()` with the `await` syntax and log the results using the provided `log()` function.
1. Call `makePromise()` with the `await` syntax and log the results.
2. Create a new function that uses the `async` keyword. Make an `await` call to `makePromise()` and return the results.
2. Create a new function that uses the `async` keyword. Inside the function, make an `await` call to `makePromise()` and return the results.

View File

@@ -1,5 +1,5 @@
// TODO: create a named export of a function called fib(n)
// export function fib(n: number) ...
// TODO: create a default export of a constant of a number
// TODO: create a default export of a constant of a number FibConst
// export default ...

View File

@@ -1,7 +1,32 @@
// TODO: import the fib(n) function and the constant from './fibonacci.ts'
// import {fib}, FibConst from ...
// Some setup code for exercises
// TODO: import Stack from './stack.ts'
// Do the exercises here, outputting results using console.log()
console.log('hello world');
// ---- Modules ----
// TODO: log the result of fib(FibConst)
// ---- Types and Interfaces ----
// TODO: define TrafficLight type
// type TrafficLight = ???
// TODO: define Car interface
// interface Car { ??? }
// TODO: create Car instance
// const myCar: Car = { ??? }
// ---- Generics ----
// TODO: Demonstrate the Stack
// const myStack: Stack<number> = ???
// ---- Spread and Destructuring ----
const obj1 = {
first: 'who',
second: 'what',
@@ -15,17 +40,16 @@ const obj2 = {
catcher: 'today'
};
// TODO: combine obj1 and obj2 into a single object megaObj using spread syntax
// const megaObj = ???
// TODO: use destructuring syntax to extract { first, second, catcher }
// ---- Async / Await ----
function makePromise() {
return Promise.resolve(5);
}
// Do the exercises here, outputting results using console.log()
// ...
console.log('hello world');
// TODO: call makePromise() using await syntax and log the results
async function run() {
// Call the function you added for the async / await exercise here
// ...
}
run();
// TODO: create a new async function