1. What is Typescript?

Further Reading on: JavaScript vs TypeScript

2. React: With JavaScript or TypeScript? Which one is Better?  3. Why Do We Use Typescript with React?

• Static Type Checking: Static Typing was introduced for React projects in TypeScript. It helps developers identify errors early on. This early detection of potential errors and prevention of runtime errors is possible because of the enforcement of type annotations from the programming language. It makes your code robust and reliable.
• Improved Code Quality: Typescript language allows the developers to define the return values, function parameters, and strict types for variables. This helps in writing a clean and self-documenting code. The Type system of the language encourages the developers to write more structured and high-quality code. So, your code becomes easy to read and maintain. 
• Enhanced Developer Productivity: The code editors of TypeScript come with features like real-time error checking, type inference, and auto-completion as a part of advanced tooling support. This helps developers code quickly, find mistakes, implement better coding suggestions, minimize the debugging time, and in the end enhance productivity. 
• Better Collaboration: It might pique your interest to know that apart from providing coding advantages, TypeScript offers collaboration advantages as well. It provides contract definitions and clear interfaces through type annotations and interfaces. It helps developers understand how different modules and components interact. This improves the overall project understanding. 

4. Create a React Application with Typescript

4.1 Prerequisites

• One Ubuntu 20.04 server. Make sure it is firewall enabled and comes with a non-root user and sudo privileges. Ubuntu 20.04 offers an initial server setup guide. It would help you get started. 
• Install nodejs and NPM. Use a NodeSource PPA with an Apt. You have to install them on Ubuntu 20.04 to get started. 

4.2 Create React App

npx create-react-app hello-tsx --typescript

4.3 Install TypeScript in the React App

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

4.4 How to Declare Props?

import React from 'react';

type DisplayUserProps = {
    name: string,
    email: string
};
const DisplayUser: React.FC = ({ name, email }) => {
  return (
    
        {name}
        {email}
    
  )
}
export default DisplayUser;

const App = () => {
  const name: string = "Cherry Rin";
  const email: string = "[email protected]";
  return (
    
  );
};

export default App;

4.5 How to Declare Hooks?

Typing the UseState hook

const [number, setNumber] = useState<>(0)

const [number, setNumber] = useState(0)

const [number, setNumber] = useState(0).

import DisplayUsers from './components/DisplayUsers';
import { useState } from 'react';

const App = () => {
  const [name, setName] = useState('Cherry Rin');
  const [email, setEmail] = useState('[email protected]');
  return (
    
  );
};
export default App;

Typing the UseRef hook

const App = () => {
  const nameRef = useRef(null);

  const saveName = () => {
    if (nameRef && nameRef.current) {
      console.log("Name: ", nameRef.current.value);
    } 
  };
  return (
    <>
      
      Save
    </>
  );
};

4.6 How to Declare and Manage States?

import React, { useState } from "react";
function App() {
  const [sampleState, setSampleState] = useState("Ifeoma Imoh");
  return 
Hello World
;
}
export default App;

import React, { useState } from 'react';
function App() {
  const [sampleState, setSampleState] = useState("Ifeoma Imoh");
  //sampleStateTwo is a string or number
  const [sampleStateTwo, setSampleStateTwo] = useState("");
  //sampleStateThree is an array of string
  const [sampleStateThree, setSampleStateThree] = useState([""]);
  return (
    

      Hello World
    
)
}
export default App;

4.7 React Functional Component

type DisplayUserProps = {
    name: string,
    email: string
};

const DisplayUsers: React.FC = ({ name, email }) => {
  return (
    
        {name}
        {email}
    
  )
}
export default Count;

interface DisplayUserProps {
    name: string;
    email: string;
};
const DisplayUsers: React.FC = ({ name, email }) => {
  return (
    
        {name}
        {email}
    
  )}

4.8 How to Display the Users on the UI?

import React, { useState } from 'react';
import { UserList } from '../utils/UserList';

export type UserProps = {
    name: string,
    email: string
};

const DisplayUsers = () => {
    const [users, setUsers] = useState(UserList);

    const renderUsers = () => (
        users.map((user, index) => (
            
                

                    
{user.name}
                    
{user.email}
                
            
        ))
    );

    return (
        
            User List
            {renderUsers()}
        
    )
}
export default DisplayUsers;

const [users, setUsers] = useState([]);

const [users, setUsers] = useState(UserList);

4.9 Run App

npm start
Shell

import DisplayUser, { DisplayUserProp as UserProps } from './components/DisplayUser';
import React, { useEffect, useState } from 'react';
import { UserList } from './utils/UserList';

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    if (users.length == 0 && UserList) setUsers(UserList);
  }, [])

  const renderUsers = () => (
    users.map((user, index) => (
      
        
      
    ))
  );

  return (
    
      User List
      {renderUsers()}
    
  );
};
export default App;

import { DisplayUserProp as UserProps } from "../components/DisplayUser";
export const UserList: UserProps[] = [
    {
        name: "Cherry Rin",
        email: "[email protected]"
    },
    {
        name: "Lein Juan",
        email: "[email protected]"
    },
    {
        name: "Rick Gray",
        email: "[email protected]"
    },
    {
        name: "Jimm Maroon",
        email: "[email protected]"
    },
    {
        name: "Shailey Smith",
        email: "[email protected]"
    },
];

import React from 'react';

export type DisplayUserProp = {
    name: string,
    email: string
};

const DisplayUser: React.FC = ({ name, email }) => {
    return (
        

          
{name}
          
{email}
        
    )
};
export default DisplayUser;

5. Conclusion FAQs

Can You Use TypeScript with React?

Is TypeScript better for React?