You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.
In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.
find references
is the simple command that finds all the references.
Basarat Ali Syed: [00:00] Here, we have a basic React.js application, and even in such a simple application, we can demonstrate a bit of the great developer experience offered to React development by using TypeScript. First up is Autocomplete. TypeScript suggests and autocompletes the component name for us. It also autocompletes any component props.
[00:25] Next up is TypeChecking. Misspell any component name, and TypeScript gives us a nice error. Misspelling any component prop also gives you an immediate error. Forget to provide a required prop, and you also get an error.
[00:56] Provide a value of the wrong type by mistake, and you get a nice error. With this active compile time error analysis, you get a lot less runtime error issues in your code base. As developers, we spend a large chunk of our time refactoring existing code.
[01:18] TypeScript is an ideal tool for refactoring. TypeScript makes it easy to rename a component to something that makes more sense as you understand more of your business requirements.
[01:31] This is not a dumb string search and replace. This is true semantic reading. You can also easily rename any prop in your component. As requirements change and you add new props, users of your components get nice errors.
[02:03] Later on, if you decide that you need to change the type of a prop, that is pointed out to your component users as well, thanks to TypeScript. These are just some of the refactoring advantages offered by TypeScript.
[02:22] TypeScript also enables excellent code navigation for your applications. With one simple command, I can find all the references to the Hello component. Similarly, I can easily see how any of the props for the component are used, for example, the compiler prop.
[02:44] TypeScript enables a whole new level of developer productivity for React developers, and in this course, we will explore this simple TypeScript/React combination.
Hopefully by January 🌹
Hi, Basarat. Thanks for the video. You mentioned that with one simple command, you can see all instances of a component but you didn't show how. Could you kindly include it in the description for the others who would view the course?
Thank you.
Quote: "With one simple command I can find all references". The command is called "Find references" Thanks for requesting a clarification 🌹
Hoping to see more, and more content in this course :) Was looking forward to see this one
What plugin are you using to jump to any statement just like that ?
Nevermind found it
Name: jumpy Id: wmaurer.vscode-jumpy Description: Jumpy provides fast cursor movement, inspired by Atom's package of the same name. Version: 0.3.1 Publisher: wmaurer VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy
Great first video. When can we expect the next video ?