The main goal of the course is to teach real-world TypeScript usage. This <Avatar /> component fits into that because almost every application has a login system which means they have an avatar, usually in the top-right. This means this demo app will mimic real-world TypeScript usage.
Create an <Avatar /> component like the on on GitHub (just the profile pic).
We want the learner to develop an intuition for adding type safety to their applications. It’s almost like meta-awareness. They know components translate to UI, but what is a component? Under the hood, it’s just a function. We want to build on top of that foundation and help them develop an intuition for applying TypeScript to the frontend stack.
The main theme we want them to understand is safety, specifically saving users from facing `undefined` or other errors. We use TypeScript, so they don’t see those. We want to add type safety, so we are in control of what gets shipped to production. Once they understand that, they’ll start to understand the benefits of TypeScript.
Requirements
If we’re successful, they’ll have enough confidence to add TypeScript to any other frontend stack they choose. The focus should be on TypeScript Fundamentals in the context of React. 80% TypeScript focus, 20% React-TypeScript focus.
Milestones
- understand TypeScript fundamentals in the context of React
- know when to use .ts vs .tsx
- test their components with react-testing-library
- understand the difference between types vs. interfaces
- understand optional vs. required vs. default type values
- create a React + TypeScript project from scratch