Your React application has PropTypes for each component. In this video, you can learn how to implement basic types in your application in TypeScript instead, how to work with the "any" type, and how to use type assertion to change types.
- [Narrator] In this video I'm going to introduce you to TypeScript by showing you how the prop types property in a React component lines up with TypeScript's type checking. Now in our exercise files I have made this exampleComponent.js file. You're gonna want to go ahead and pull that out and drop it into your project and go ahead and run an npm install just to be sure. Now as you can see in this exampleComponent we have the prop types attribute set down here with a couple of different types set. Now the prop types attribute will enforce type checking on props that are coming into a component.
So as you are instantiating this component if you're using the name prop and it's anything else other than a string, it would go ahead and flag an error for that. And likewise if you were using the quantity prop and you were declaring it with anything else other than an number, it would also throw an error. Now TypeScript is a language dedicated to exactly that, strict type checking. In order for us to use TypeScript's type checking in our angular component, we're gonna need to go ahead and open up a TypeScript file. So in this case we're gonna use app.compotent.ts here.
And let's say we want to declare those exact same variables here with those exact same types as we had in the prop types. In order to do that we simply use the name that we want to declare the variable as. So in this case we're gonna declare it as name, and then you use a colon instead of an equals sign to indicate that you are declaring a type for a variable. So in this case we're going to go ahead and declare this as a string type. And you're going to want to make sure that that's all lowercase. You can accidentally type it as the title cased version of string, but that actually means something quite a bit different.
And so likewise we're gonna go ahead and declare the quantity as a number. If you want to set a default value to some of these because in essence this is the declaration of the variable. This variable quantity is no longer considered undefined. If you want to go ahead and set a default value to it, you simply add an equals and then the value to it at the end. Now we have a variable quantity of a type number with default value of zero. And let's say we were to go down here and try to type quantity = and you see the instant I threw these quotes up it's telling me that it cannot be declared as a string, so you've went ahead and tried to assign a string value to something that's already been typed as a number.
And that is the strict type checking of TypeScript acting in the IBE, in this case Visual Studio code, to enforce this type checking so that you make sure that you are sticking to the types of the variables as you've declare them. And so that's a basic introduction to TypeScript and associating it with the prop types Property and React.
- Comparing ES6 to TypeScript
- Converting and app from React to Angular
- Evaluating the code structure of a React app
- Compilating ahead of time
- Using type guards and advanced types
- Converting components
- Working with controller logic
- Passing data between components
- Creating pipes and directives
- Using services instead of flux
- Using declared routes