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

Fix typos

Browse Source
This commit is contained in:
Rodger Jordas
2019-02-26 13:49:38 +08:00
parent 6ee37188f6
commit 5044bd5f9d
11 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
step1-07/demo/README.md
View File

@@ -6,21 +6,21 @@ Now that we have a UI that is purely driven by the state of our app, we need to
This is our core 'business logic' and handles everything our basic 'CRUD' operations of "Create, Read, Update, Delete". We don't have time to walk through writing all of those functions, but you can see that they are already provided in the demo's `TodoApp` and passed into our components.
## Intro to Typescript
## Intro to TypeScript
Taking a look at our components in `TodoApp` you can see that our list of props is not just getting longer, but is getting much more complex! We're passing through functions with various signatures, complex `todos` objects as well as filter strings which are always one of three values.
As applications grow, it becomes increasing difficult to remember what each function does, or what each todo contains. Also, as JavaScript is a loosly type language, if I wanted to change the value of `todos` to an array inside my `TodoList`, javascript wouldn't care. But if `TodoListItems` was expecting an object, our application would break.
As applications grow, it becomes increasing difficult to remember what each function does, or what each todo contains. Also, as JavaScript is a loosely type language, if I wanted to change the value of `todos` to an array inside my `TodoList`, JavaScript wouldn't care. But if `TodoListItems` was expecting an object, our application would break.
It is because of these two reasons that the entire industry is shifting to writing applications that are strongly typed, and are using Typescript to accomplish that.
It is because of these two reasons that the entire industry is shifting to writing applications that are strongly typed, and are using TypeScript to accomplish that.
As [their website](https://www.typescriptlang.org/) state:
> Typescript is a superset of JavaScript that compiles to plain JavaScript
> TypeScript is a superset of JavaScript that compiles to plain JavaScript
If you've ever used [Sass](https://sass-lang.com/) you are familiar with this concept. In the same say that all valid CSS is valid Sass, all valid JavaScript is valid Typescript. That's why most of this project has been writting in `ts` and `tsx` files instead of `js` and `jsx` files.
If you've ever used [Sass](https://sass-lang.com/) you are familiar with this concept. In the same say that all valid CSS is valid Sass, all valid JavaScript is valid TypeScript. That's why most of this project has been writing in `ts` and `tsx` files instead of `js` and `jsx` files.
Let's dive into the demo and see how Typescript can help us better understand our component props, and guard against future regressions.
Let's dive into the demo and see how TypeScript can help us better understand our component props, and guard against future regressions.
## Demo
@@ -80,7 +80,7 @@ Now try going back to `TodoApp` and changing the `filter` attribute in `TodoList
#### Complete Type
The `complete` props isn't data, but rather a function. Fortunatly, Typescript can handle function types just as well as data.
The `complete` props isn't data, but rather a function. Fortunately, TypeScript can handle function types just as well as data.
```tsx
interface TodoListProps {
@@ -115,7 +115,7 @@ Now that our interface is complete, try changing the word 'all' in `filter === a
### Abstracting types
Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that Typescript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface.
Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that TypeScript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface.
```tsx
import { FilterTypes, Todos } from '../TodoApp.types';
@@ -129,7 +129,7 @@ interface TodoListProps {
### Updating TodoApp
Our `TodoApp` doesn't take any props, but it does have state. We can use Typescript to define that as well.
Our `TodoApp` doesn't take any props, but it does have state. We can use TypeSscript to define that as well.
I've already imported `Todos`, and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. We can even skip the 'interface', if we want to, and add them directly to the class.