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

adding support demo and exercise sub dirs

Browse Source
This commit is contained in:
Ken
2019-02-18 12:50:57 -08:00
parent d98bda36ad
commit f24ec319f1
16 changed files with 215 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
step2-01/exercise/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

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

@@ -0,0 +1,12 @@
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 Normal file
View File

@@ -0,0 +1,23 @@
// 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 {};

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

@@ -0,0 +1,19 @@
// 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 Normal file
View File

@@ -0,0 +1,22 @@
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 Normal file
View File

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

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

@@ -0,0 +1,19 @@
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 Normal file
View File

@@ -0,0 +1,12 @@
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 Normal file
View File

@@ -0,0 +1,15 @@
// 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 Normal file
View File

@@ -0,0 +1,55 @@
// 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 {};

3
step2-01/src/async/index.ts
View File

@@ -7,3 +7,6 @@ async function fetchSomething() {
fetchSomething().then(text => {
console.log('hello ' + text);
});
// adding an export to turn this into a "module"
export default {};

3
step2-01/src/generics/index.ts
View File

@@ -18,3 +18,6 @@ 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 {};

3
step2-01/src/interfaces/index.ts
View File

@@ -17,3 +17,6 @@ const myCar: Car = {
interface InterestingFn {
(someArgs: string): number;
}
// adding an export to turn this into a "module"
export default {};

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

@@ -10,3 +10,6 @@ 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 {};

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

@@ -50,3 +50,6 @@ class Animal {}
// 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 {};

26
webpack.config.js
View File

@@ -1,5 +1,3 @@
// @ts-check
const path = require('path');
const fs = require('fs');
@@ -8,22 +6,26 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const entries = {};
function getEntryPoint(entry) {
if (entry.includes('step') || entry.includes('playground')) {
for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
if (fs.existsSync(`./${entry}/src/index${suffix}`)) {
return `./${entry}/src/index${suffix}`;
function* getEntryPoint(step) {
if (step.includes('step') || step.includes('playground')) {
for (let prefix of ['', 'demo/', 'exercise/']) {
for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
const entryRequest = `./${step}/${prefix}src/index${suffix}`;
if (fs.existsSync(entryRequest)) {
yield entryRequest;
}
}
}
}
return false;
}
fs.readdirSync('./').filter(entry => {
const entryPoint = getEntryPoint(entry);
if (entryPoint) {
entries[entry] = entryPoint;
fs.readdirSync('./').filter(step => {
for (let entryPoint of getEntryPoint(step)) {
if (entryPoint) {
entries[entryPoint.replace(/\/src\/index.*/, '').replace(/^\.\//, '')] = entryPoint;
}
}
});