From the course: React: Using TypeScript

Introduction to TypeScript with React

From the course: React: Using TypeScript

Start my 1-month free trial

Introduction to TypeScript with React

- [Emmanuel] TypeScript in React isn't that much different than if you were to learn it on its own. Because React uses ES6 syntax, and a lot of JavaScript conventions to build components, such as classes and regular functions, moving to TypeScript with React is a fairly painless process. Since we've created our React project, not much has changed after we added TypeScript and ran the project again. A few files such as the tsconfig file has appear but nonetheless, minimal. Throughout this chapter, we'll start exploring what are the basic types, look at its syntax, and finally apply it to stateful and functional components. As a side note, we're not going to make any changes in the project structure, such as adding a components folder, so we can focus on learning TypeScript. But these changes shouldn't have any impact on TypeScript-based project, first is typical JavaScript. Let me explain the basics of a TypeScript project. First, we install the few dependencies into our project. This is to support the custom type definitions that comes with a React project such as jest, node, and react types, that were defined by their respective teams. So when we compile a project with the types used in the React project, TypeScript won't scream about it. Next is the tsconfig file, which is the one file needed to be able to use TypeScript in your project. As mentioned before, in the past, when we were using Create React App, or react-scripts, prior to version 2.1, we had to create all these files manually and update Webpack ourselves. Therefore we had to eject a React project and lose a lot of the React ease-of-use. But now this is all done automatically for us. As soon as Webpack recognizes the dependencies we installed in the project, it adds the tsconfig file for us, and with it the options and best practices a React project requires. If you look at the tsconfig, it has the JSX, forceConsistentCasingInFileNames, and many others options turned on. If you skip the video where we install React or created your project from a version of Create React prior to 2.1, you will not see what I've shown here, and I strongly suggest you go back to these videos where we set up React and then TypeScript. You'll definitely thank me as it is much easier this way.

Contents