Typescript React — Getting started

Hello, it's me again. Who? that's not important, just know it is me again. I am here to bring you a typescript beginner getting started(as told by my title).

I am not gonna start with why you should use typescript. If you are here, you have made the decision to use typescript, and you are looking for how to begin the project. I am not going to give you a detailed overview of everything, but just a way to set up and some quick info.

Step 1

when you start a new typescript project you need a tsconfig.json file that will install the dependencies and do all the things we know .json files to do. While I could give you a .json file to copy and paste, it is a lot less typing for me if I show you a command to create a project that comes with the .json file.

We will use the all-powerful create-react-app 😍.

Navigate to the folder that you want to put the project in and type this command in the terminal:

$ npx create-react-app project-name --typescript 

There are two things to note. In the current version of create-react-app that I am using, you have to use npx command and you cannot have any caps in the project name(not a big deal but worth mentioning in case you use the create-react-app command differently). The most important thing is having npm and create-react-app installed on your computer and the “ — typescript ”(those are double dashes but medium is being dumb).

When you run the command you will have the project folder that looks very similar to a react folder, but it will have a .json file for typescript in there. You will not have to worry about the crazy dependencies you need and forgetting to install one.

Step 2

We now have our project and we can move into the app file and start some tomfoolery. we will try to render a simple component and pass a prop that will be checked for a type, but we have to create another component. let's call the component “bob” or whatever you want(I can’t control your life).

We shall start from a normal react component.

Make your “bob.js” file

Make a basic react component

import React from 'react'
const Bob = () => {
  return (
    <div>
    </div>
  )
}
export default Bob

Once we have a react component to change it to a typescript component we have to declare it as such.

to declare a regular component as a typescript component you have to add to the declaration of the component.

import React from 'react'
const Bob: React.FC = () => {
  return (
    <div>
    </div>
  )
}
export default Bob

React has given us a type that we can use to declare for a functional component. All we added was “: React.FC”. You can look at your autocomplete to get more information on this type.

We are not done yet … we have to also declare what type of props this component can be expected to get. To do this we will create an interface and add key — value pairs to it. The keys will be the name of the props and the values are the type. We then will add all of this in angle brackets at the end of our “FC”.

import React from 'react'
const interface props {
  text: string;
}
const Bob: React.FC<props> = () => {
  return (
    <div>
    </div>
  )
}
export default Bob

With this, the basic structure of a component is done. We can now call it. The only caveat is that if we call this component without a prop named text vs code will yell at us(if you use vscode… and if you don't … I have no words for you.. yes you atom users).

<Bob text={"Hello World"}/>

We have finished the very basic step of creating a component and this will get you through the beginning of your projects and more youtube or medium tutorials will be open to you. I will be making a more detailed overview of a typescript tutorial but in the meantime. Stay blessed and happy coding 🙏🏾.