In one of the previous articles, we got to know about the TypeScript language with its syntax, features, and all the basics needed. Now in this article, we’ll guide you on how to create react app with typescript.
This time, let’s use some of those concepts of the language and apply them in one of the React applications. We will start by setting up both TypeScript and a default React app and then go on coding the entire functionality along with knowing how the compilation works.
Some people prefer and use online built-in free react templates or either react code to start their project. But, this article assumes you have basic knowledge of both TypeScript and React.js.
Setup TypeScript on your machine
You can install TypeScript globally via the following NPM command:
<code>npm install -g typescript</code>Next, you can confirm the installation by running tsc –v to check the version of TypeScript installed in your system.
An important note is that after you write a TypeScript code and want to run it, simply running tsc with the file name won’t work as tsc is just a TypeScript compiler. We need Node.js to get the actual log output. So we can do it by running this command for a “Hello World” program:
<code>tsc hello.ts && node hello.js </code>Create react app with typescript
So, if you want to create react app with typescript you need to understand the following.
Prerequisites
As a React developer, you must have used the standard Create React App command to kick off a new React project in the following way:
npx create-react-app my-app
cd my-app
npm startThis creates all the files in JavaScript but here we want to add TypeScipt when we first start creating our app. So for that, we need to instead run the following command:
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescriptThis time you will get a React app with .js and .jsx files replaced with TypeScript’s .ts and .tsx syntax! But if you are already working on a React project that uses JavaScript, you can instead add TypeScript with:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jestAnd then manually rename files accordingly. The beauty of Create React App command is that you don’t have to worry about creating the tsconfig.json file (which contains all the initial settings for the language), it will be generated automatically with the default code.
This is how you can create react app with typescript so try to use the same process and implement it in your project.
How the compilation works with TypeScript?
It’s important to understand how the TypeScript compiler works behind the scenes with React to run your code and display it in your browser.
For that, it checks the tsconfig.json file in your project root folder where all the necessary instructions are laid. It loads those settings in order to build your project code. A typical config file would look like this:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
}
}One thing to note here is that there is a key here called jsx which is set to react. With this TypeScript now knows to compile all the JSX files as React files.
Related Article: React Table: A detailed guide with Examples
Creating components in React with TypeScript
In this demo, we will be making use of one of the most essential TypeScript features called interfaces.
After you created a new React project with the TypeScript template, as shown above, let’s create a new file under the /src folder called PersonDetails.ts. This will hold the following code:
export default interface Person {
name: string;
age: number;
company: string;
dob: Date;
}It defines and exports a Person interface with name, age, company, and dob as its properties. We can confirm that this is a strongly-typed interface as we cannot have an integer value for a property like a company. It has to be of type string. Now as we exported this, we have to use it somewhere.
Let’s create a new component file under the /components folder and call it PersonComponent.tsx. Here we use React’s class component to use the exported Person interface from PersonDetails.ts in the constructor:
import Person from '../PersonDetails'
export default class PersonComponent extends React.Component<Person, {}> {
constructor (props: Person){
super(props);
}Note that do not forget to import the Person interface so that it can be passed down as the props of the PersonComponent. In the constructor, we check that the props are of Person type and then we can now use it in our render function as:
render() {
return (
<>
<h1>Name: {this.props.name}</h1>
<p>This person is {this.props.age} years old</p>
<p>This person works in {this.props.company} company</p>
<p>You were born on {this.props.dob}</p>
</>
);
}Now wherever we intend to use this component, we can pass on props as such:
import PersonComponent from './components/PersonComponent'
<RootComponent>
<h1>Welcome to my React app with TypeScript</h1>
<PersonComponent name="Owen Johnson" age={36} company="LAVERTON BAR" dob={new Date()} />
</RootComponent>Now when you run npm start on your terminal, you should get the expected result but this time your code is much more verbose thanks to the power of Interfaces in TypeScript. You need to follow each step properly if you want to understand How to create react app with typescript
Congrats! You just wrote the first piece of React component with TypeScript.
Now that you have complete knowledge of How to create react app with typescript and its works, you can go on to build more complex apps that use more TypeScript features like using types, generic functions, etc.
