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

Add step2-01 final folder with solutions

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-05 14:17:56 -08:00
parent 5ce0dba5c4
commit 2ad3064111
9 changed files with 123 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -86,7 +86,7 @@
<div class="Tile-link">
TypeScript Basics
<div class="Tile-links">
<a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a>
<a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a> | <a target="_blank" href="./step2-01/final/">final</a>
</div>
</div>
</li>

2
step2-01/demo/README.md
View File

@@ -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.

2
step2-01/exercise/README.md
View File

@@ -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.

7
step2-01/exercise/src/index.ts
View File

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

5
step2-01/final/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Step 2.1 - Introduction to TypeScript (Final)
[Lessons](../../) | [Demo](../demo/) | [Exercise](../exercise/)
Look at the src folder for exercise solutions.

14
step2-01/final/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app">
Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open the console
window.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>

6
step2-01/final/src/fibonacci.ts Normal file
View File

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

77
step2-01/final/src/index.ts Normal file
View File

@@ -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<number>();
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<number> {
return Promise.resolve(5);
}
async function getGreeting(name: string): Promise<string> {
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 {};

15
step2-01/final/src/stack.ts Normal file
View File

@@ -0,0 +1,15 @@
export class Stack<T> {
private _store: T[];
constructor() {
this._store = [];
}
push(elem: T): void {
this._store.push(elem);
}
pop(): T {
return this._store.pop();
}
}