Front End Masters: React and TypeScript
course website: https://stevekinney.github.io/react-and-typescript/ course repo: https://github.com/stevekinney/react-and-typescript-projects
The Fundamentals
Local Setup
source: https://frontendmasters.com/courses/react-typescript/local-setup/
propTypes
source: https://frontendmasters.com/courses/react-typescript/proptypes/
Common Types
source: https://frontendmasters.com/courses/react-typescript/common-types/
type GroceryListProps = {
items: string[];
status: "loading" | "error" | "success";
}
type ExampleComponentProps = {
anObject: object; // useful as a placeholder
anotherObject: {}; // can have any properties and values
item: {
id: string;
title: string;
};
items: {
id: string;
title: string;
}[]; // array of objects of a certain type
}
// example of an object called "Item"
type Item = {
id: string;
title: string;
};
// Items is just an array of Item's
type Items = Item[];
// this object has a key of type string and value must be an Item
type ItemHash = {
[key: string]: Item;
}
Record<string, Item>; // same as ItemHash
These two implementations are the same:
// function that adds two numbers
function add(a: number, b: number): number {
return a + b;
}
// function that adds two numbers with arrow function syntax
const add = (a: number, b: number): number => a + b;
Types vs Interfaces
source: https://frontendmasters.com/courses/react-typescript/types-vs-interfaces/
- kind of like Types and Interfaces, function declaration and function expressions are mostly the same, but there are some differences.
- Types show up better in the IDE
- Here is an example type and interface:
type Item = {
id: string;
title: string;
};
interface Item {
id: string;
title: string;
}
Typing Children Exercise
source: https://frontendmasters.com/courses/react-typescript/typing-children-exercise/
Typing CSS Styling
source: https://frontendmasters.com/courses/react-typescript/typing-css-styling/
useState Hook
source: https://frontendmasters.com/courses/react-typescript/usestate-hook/
Here is an example mini-app:
import { questions } from './questions';
import { useState } from 'react';
type QuestionProps = {
question: string;
answer: string;
};
const Question = ({ question, answer }: QuestionProps) => {
/*
* You can also do:
* const [hidden, toggleHidden] = useState<boolean>(true);
* but you don't need to define the type - it can infer based on set value
**/
const [hidden, toggleHidden] = useState(true);
return (
<article className="question">
<header>{question}</header>
<p className="answer">
<span className={`${hidden ? 'blurred' : 'visible'}`}>{answer}</span>
</p>
<footer>
<button onClick={() => toggleHidden(!hidden)}>Toggle Answer</button>
</footer>
</article>
);
};
const Application = () => {
return (
<main>
{questions.map((q) => (
<Question question={q.question} answer={q.answer} key={q.id} />
))}
</main>
);
};
export default Application;
Interacting With Components
Set State Without a Default Value
source: https://frontendmasters.com/courses/react-typescript/set-state-without-a-default-value/
useEffect TypeScript Exercise & Solution
source: https://frontendmasters.com/courses/react-typescript/useeffect-typescript-solution/
Typing Class-Based Components
source: https://frontendmasters.com/courses/react-typescript/typing-class-based-components/
Working With Reducers
Typing Reducers
source: https://frontendmasters.com/courses/react-typescript/typing-reducers/ notes: https://stevekinney.github.io/react-and-typescript/reducers
type PizzaData = {
numberOfPeople: number;
slicesPerPerson: number;
slicesPerPie: number;
}
type PizzaState = PizzaData & { pizzasNeeded: number; }
Color and Context
Just Enough TypeScript
Generics
- Typescript generics are a way to define a type that is a function of other types.
- Here's an example with a linked list node:
type LinkedListNode<T> = {
value: T;
next?: LinkedListNode<T>;
}
const first: LinkedListNode<string> = {
value: 'first'
}
const second: LinkedListNode<number> = {
value: 2,
}
// TypeScript will not allow this because it is expecting a node of the same type
first.next = second;
TypeScript Playground Error https://github.com/coolinmc6/front-end-dev/blob/master/assets/typescript01.png - fix asset path