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

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

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