microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

added some exercise bits to step 2.1

Browse Source
This commit is contained in:
Ken
2019-02-18 14:45:00 -08:00
parent f24ec319f1
commit ac9e68e045
14 changed files with 149 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
step2-01/README.md
View File

@@ -1,8 +1,87 @@
# Step 2.1 # Step 2.1
Typescript ## Introduction to Typescript
- ES6 modules review In this exercise, we'll cover enough of the Typescript concepts to be productive with the React & Redux frameworks.
- a look at types
- defining interfaces 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<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 provided `log()` to show the functionality of `Stack<T>`
### 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

14
step2-01/exercise/index.html
View File

@@ -1,5 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<style>
* {
margin: 0;
outline: 0;
}
textarea {
width: 100vh;
height: 100vh;
border: none;
}
</style>
</head>
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>

12
step2-01/exercise/src/async/index.ts
View File

@@ -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 {};

23
step2-01/exercise/src/generics/index.ts
View File

@@ -1,23 +0,0 @@
// 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;
}
// adding an export to turn this into a "module"
export default {};

34
step2-01/exercise/src/index.ts Normal file
View File

@@ -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
// ...
})();

19
step2-01/exercise/src/index.tsx
View File

@@ -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';

22
step2-01/exercise/src/interfaces/index.ts
View File

@@ -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 {};

3
step2-01/exercise/src/modules/default.ts
View File

@@ -1,3 +0,0 @@
export default class DefaultClass {
hello = 'world';
}

19
step2-01/exercise/src/modules/index.ts
View File

@@ -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);

12
step2-01/exercise/src/modules/named.ts
View File

@@ -1,12 +0,0 @@
export const namedConst = 5;
export function namedFn() {
return 5;
}
export const namedObj = {
hello: 'world'
};
const namedConstBracket = 10;
export { namedConstBracket };

15
step2-01/exercise/src/spread/index.ts
View File

@@ -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 {};

55
step2-01/exercise/src/types/index.ts
View File

@@ -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 = <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 {}
// adding an export to turn this into a "module"
export default {};

13
step2-01/src/spread/index.ts
View File

@@ -1,6 +1,6 @@
// Destructuring // Destructuring
var [x, y, ...rest] = [1, 2, 3, 4]; var [a, b, ...rest] = [1, 2, 3, 4];
console.log(x, y, rest); // 1,2,[3,4] console.log(a, b, rest); // 1,2,[3,4]
// Array assignment // Array assignment
var list = [1, 2]; var list = [1, 2];
@@ -11,5 +11,14 @@ console.log(list); // [1,2,3,4]
const point2D = { x: 1, y: 2 }; const point2D = { x: 1, y: 2 };
const point3D = { ...point2D, z: 3 }; 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" // adding an export to turn this into a "module"
export default {}; export default {};

8
step2-01/src/types/index.ts
View File

@@ -26,12 +26,16 @@ type Specific2 = {
}; };
// composition // composition
type typeofObj = { type TypeOfObj = {
foo: string; foo: string;
bar: number; bar: number;
obj: Specific1; obj1: Specific1;
obj2: Specific2;
}; };
// Get types by property
type Obj1Type = TypeOfObj['obj1'];
// union, intersection // union, intersection
type Union = Specific1 | Specific2; type Union = Specific1 | Specific2;
type Intersection = Specific1 & Specific2; type Intersection = Specific1 & Specific2;