Intro to TypeScript

[00:00] From now on, we're going to be using TypeScript for everything. TypeScript is a great language built on top of JavaScript that allows you to have type safety. Now, the benefit of type safety is that people will call your functions, and if they call it with the wrong type of data,

[00:19] so they're calling a function that requires a string because it's going to two uppercase the string or something, you pass it a number, you're going to get an error. In JavaScript, you just don't get that sort of static type checking. So the entire industry pretty much is using TypeScript, and you definitely want to be using TypeScript also.

[00:38] And so we're going to explore TypeScript a little bit in this exercise. The cool thing about TypeScript and React is that it's really not too much of anything special. So let's first talk about TypeScript. Some people are annoyed about how TypeScript

[00:58] puts little red squigglies everywhere, and you're like, no, that's not a problem. I know that it works. Like, you run it in the deployed version of your app, and it's all working fine, but TypeScript is complaining. And so they're annoyed that they have to add extra code just to appease the compiler. But really, TypeScript isn't making your life terrible.

[01:16] It's just showing you how terrible your life already is. So if TypeScript says that this function is getting called incorrectly or whatever, then you should listen, because it is very possible that that scenario should happen and you want to handle that scenario. So on top of that, you could think of TypeScript

[01:34] as a brutally honest friend that you put up with because they save you from making terrible mistakes. And this is the friend that will tell you you've got spinach in your teeth. Even though you don't want to hear you've got spinach in your teeth, you're grateful because you don't want to walk around with spinach in your teeth.

[01:52] So TypeScript is a valuable tool. You definitely want to be using it. And again, as a reminder, React components are functions which accept an object and return something that is renderable. And so as far as TypeScript is concerned, you just type your components like they're functions. There's nothing really special about that.

[02:12] So I'm gonna give you a little quick intro to types with TypeScript for functions, and that should be enough to get you ready to use TypeScript in your React apps. So here, this is a regular function in JavaScript

[02:30] accepts a user, that user presumably has a name property. And if that name property is null or undefined, then we return unknown. So we're presumably returning a string, but we actually don't know what that name is. Maybe that name is an object, who knows? We don't really know. So if we add some types, so now we say user is an object

[02:48] that has an optional name property, which is a string. Now we can type the user parameter. And now we know for sure, okay, this is gonna return a string. And you can be a little bit more explicit about what the return value is. And you can say this returns a string. And if you end up not returning a string, you'll get a type error there as well.

[03:08] I typically prefer to go with TypeScript's inference for something like this. I don't normally add a return type for my functions, but you totally can, and it can be helpful sometimes. But yeah, for myself,

[03:24] I try to add as little extra code for the typings as possible. So I lean on inference a lot, and it works out nicely for me. So if we're talking about components, here is just a regular JavaScript component.

[03:40] We could add a message props type here. This children is a string, and here's what that is gonna render. But if we wanted to put in other React elements or anything, then we're going to want to use the React node type. This is coming from React.

[04:01] And so if you use React node, then you can pass in other React elements and all of those renderable things. So we use the React node type quite a lot. And then you don't have to give your props or your type for the props a name. You can just inline it, and that way you don't have to come up with a name for things.

[04:22] It's pretty much always gonna be the name of the component props, and that just annoys me, like just inline it. And then on top of that, you destructure it. And this is what I do most of the time. I destructure the props, and then I define the props in line like this. That works out nicely for me. Of course, you can mix and match. You can destructure and give it a name.

[04:41] But yeah, normally this is what I do. Now, just as a final word on this, if you're just getting into TypeScript, a really common challenge that you're going to face is you get a red squiggly, and you don't know how to solve it. And that can be really frustrating.

[05:01] You can spend hours, and this is where people develop the opinion of like, oh, TypeScript is just in my way. If you feel like TypeScript's getting in your way, then you can use ts.expectError, and you can explain what you tried or why this isn't working the way that you were hoping it would.

[05:21] Make sure you check out, like check the code with AI assistants, because they might be able to help you with that. But if you can't figure it out, there's no shame in just using ts.expectError on that area. It's not gonna, it's gonna make this little hole in your type safety of your program.

[05:39] But I'd rather have a program with holes in it than no program at all, unless you're building, I don't know, flight guidance system software or like a heart monitor or something. There's levels of comfort I have with those things. But if you're just learning TypeScript

[05:57] and turning TypeScript off for a certain area is perfectly acceptable. And then you can come back later when you know TypeScript better and fix those areas. And of course, AI assistants should be able to help you with most common TypeScript things. TypeScript can for sure get super complicated,

[06:17] but most application development that you're gonna be doing and everything we do in this workshop series, you should be able to do with pretty foundational TypeScript knowledge. So with this exercise, we're gonna be typing a couple of things and finding some cool ways

[06:32] to make the developer experience of using our components as awesome as possible with autocomplete and type safety on our props and things. So look forward to that. We'll see you in this exercise.

Discord

Email

GitHub

Learn everything you need to be effective with the fundamental building blocks of React applications. 

The path of this workshop takes you from the fundamental API of appending DOM nodes, through React's raw APIs, to how JSX compiles into React's methods.

Once you have a firm grasp of what React is doing with creating elements, you'll learn the other tools you need to build webpages like: styling, forms, and inputs. 

But, this isn't just a native web course. 

**You'll be building a strong foundation in React.** 

Learn how to: 

- build reusable components
- leverage TypeScript with React
- catch errors with Error Boundaries
- render arrays properly with the `key` prop. 

When you’re finished, you’ll be prepared to create and use React components to build excellent experiences for your app's users.

## Hello World in JS

You'll start your journey by learning some of the history of how we went from generating HTML on the server and adding JS on top to full-fledged frameworks. 

To learn React you'll be following a similar path and begin by learning how to manually append your own DOM nodes.

I call this "going down to level up." You'll find yourself much more efficient with React if you understand the fundamentals of the DOM and JavaScript!

## Raw React APIs

Before getting into JSX, you'll learn how to work with React and ReactDOM's raw APIs. 

You'll create React elements with `React.createElement` and learn how compose your elements with calls to this function. Then, you'll render the React elements you create using ReactDOM.

## Using JSX

Once you know what React is doing under the hood, you'll be prepared to learn JSX.

This section covers more than just how to write it, you'll also use babel to experiement with how JSX gets compiled to the raw React APIs!

## Custom Components

Just like in regular JavaScript, when you want to reuse code, you write functions. If you want to share JSX, you can do that as well. 

In this section you'll learn about how in React, we call these functions "components", the special properties of these functions, and how to 

## TypeScript

> TypeScript is not making your life terrible. It's just showing you how terrible your life already is. 
 
*- Kent C. Dodds*

Getting a solid hold of TypeScript from the get-go will set you up for success. Since React components are just functions, there aren't any special considerations when applying type annotations. 

So, you'll be working on two things:

1. Improving your TypeScript skills
2. Learning the React-specific types available

## Styling

In this section you'll learn about the two primary ways to style React components:

1. Inline styles with the `style` prop
2. Regular CSS with the `className` prop

You'll also learn why React uses a `className` prop instead of `class`. 👀

## Forms

In React, there actually aren't a ton of things you have to learn to interact with forms beyond what you can do with regular DOM APIs and JavaScript.

Here, you'll learn the form markup, build an onSubmit handler, and then create a form action. 

## Inputs

There's a ton of different input types and you're going to learn a lot about them here!

You'll learn about the different text inputs, check boxes, radios, hidden inputs, how to make sure everything is properly labeled and accessible, and setting default values and default checked boxes. 

## Error Boundaries

This is something you want to learn early on. Sometimes things go wrong and we need to handle errors and display useful information to the user. 

An ErrorBoundary component doesn't ship with React by default. So, you'll be importing one from react-error-boundry and then learning how to compose it, and then give the option to the user to reset. 

## Rendering Arrays

In React you can render arrays of elements. One of the tricky parts about it is the `key` prop. 

In this section, you'll learn in detail why React needs the `key` prop to keep track of elements and the nuances of the value that is used. 

Finally, you'll learn a cool trick where the `key` prop is used as a mechanism for resetting elements in the DOM!


Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

Get access to Epic React

And continue watching this video