Up & Running with React Native & TypeScript

nader dabit

React Native

React

TypeScript

In this video we learn how to get started in a new React Native project using TypeScript, create types, run, & refresh the application.

Code

You must be a Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Become a Member
and unlock code for this lesson

orLog In

Discuss

Transcript

Instructor: To get started, we'll initialize a new React Native project running React Native Init and the name of the project. To make this a TypeScript project, we'll also add the -- template flag set to TypeScript.

Next, we'll change into the directory and take a look. Here, we'll see the files that we have in our project, included are app.js, app.tsx, and this additional setup.js file.

To complete setting this project up for TypeScript, we can now execute the setup.js file. After running setup.js, we'll notice a few files have been removed from our project including app.js and the read me.

Next, we'll open the project in our text editor and test it out. We'll first create a type to describe our state. In our state, we'll set a name property as a string and an ID property as a number.

Next in our class, we'll initialize some initial state. Notice that if we set the ID property to a string, we could get an error message that says type string is not assignable to type number.

If we try to assign a number to the type name, we'll get an error message that says type number is not assignable to type string.

To run the project, we can still run React Native Run iOS or React Native Run Android. We can continue to make changes in our file and refresh our application using the same React Native workflow that you are used to if you've been working with JavaScript.