⚠️ This lesson is retired and might contain outdated information.

Why use TypeScript with React

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

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.

Hussein Morsy
Hussein Morsy
~ 7 years ago

Great first video. When can we expect the next video ?

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 7 years ago

Hopefully by January 🌹

Paul Simon Ongpin
Paul Simon Ongpin
~ 7 years ago

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.

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 7 years ago

Quote: "With one simple command I can find all references". The command is called "Find references" Thanks for requesting a clarification 🌹

Michał Murawski
Michał Murawski
~ 7 years ago

Hoping to see more, and more content in this course :) Was looking forward to see this one

Etenne-Joseph Charles
Etenne-Joseph Charles
~ 4 years ago

What plugin are you using to jump to any statement just like that ?

Etenne-Joseph Charles
Etenne-Joseph Charles
~ 4 years ago

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

Markdown supported.
Become a member to join the discussionEnroll Today