Introduction

So far, we have developed web applications using JavaScript only. Whether it was delving into a library such as React or plain, vanilla JavaScript as is, we have not incorporated any other language to help with development.

Today, we will focus on a superset language to JavaScript called Typescript and see how this language builds on what already exists in JavaScript. This will not be an intro to TypeScript session, there are plenty out there already.

Instead, we will dive deep into using TypeScript with the React.js library.

What is TypeScript and why use it?

TypeScript as the name implies, mainly focuses on enforcing static typing and offers an object-oriented method to development. It was created and is maintained by Microsoft.

Unlike JavaScript, where variables can be dynamically typed, TypeScript will enforce static typing and infer types where one is not explicitly declared. It will throw errors if type mismatches are found.

TypeScript also enforces compile-time checking as opposed to run-time checking alerting developers of any issues.

It is better to use TypeScript for web development as code can be debugged more easily and makes the codebase much more manageable. You are not left to your own devices trying to piece together what dynamic variables represent in your code.

An added bonus to working with TypeScript is the ability to apply object-oriented concepts to web development. Features such as classes exist in JavaScript, but they are written in syntactical sugar form to represent something else. Other features such as interfaces and enums do not exist.

You get all that and more with TypeScript.

If you have development experience with object-oriented languages, TypeScript will be very easy to pick up.

Remember in the end though, TypeScript is a superset language to JavaScript so it builds on whatever already exists in the JavaScript world.

If you know JavaScript, you already know most of TypeScript.

TypeScript Transpiler

Key feature to note about TypeScript is that it cannot be ran in the web browser. It must be compiled into JavaScript first before running in the browser.

The TypeScript Transpiler does just that.

It converts the given TypeScript code into equivalent JavaScript code and passes that into the browser. You do not have to do anything, but it is an important piece of knowledge to keep in mind.

We will cover more features related to TypeScript as we dive into the code overview and demo.

Code Overview

Alright! So with that out of the way, it is time to dive in! You can follow along by cloning this repository.

The directory we will work with is: /demos/Demo14_Typescript_React.

We are going to be working with the same web application we built last time only to re-implement the whole thing using TypeScript.

To initialize a working environment using TypeScript with React.js, you can simply run the following in the command line:

npx create-react-app . --template typescript

This will initialize the Node environment in the current working directory, set up the React development environment using TypeScript, and lastly, install the necessary NPM packages to run React.js including the TypeScript NPM package.

As discussed in the NPM demo, you should see the package.json file and the node_modules directory. You should also notice a new file called tsconfig.json in the same location. This file relates to the configuration of TypeScript within the project.

The TypeScript Configuration File

The tsconfig.json file is often located in the root directory of the project. The transpiler will search for this file and use it to process how to compile TypeScript code.

It contains data in JSON format detailing various different things:

• Options for Transpiling: Different options for deciding how TypeScript should transpile your code.
• Include & Exclude Files: What files to include and exclude during the compile phase.
• Output Destination for Transpiled Code: You can specify where the compiled JavaScript files should be placed.
• Module Resolution: You can configure how to manage modules.
• Libraries: Allow developers to choose libraries such as ES5, ES6, and so on.

And a whole lot more. Here is the tsconfig.json file for this project:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

I did not add any custom options to this file as this is sufficient enough for the demo. However, we can modify this file according to what we like.

TypeScript File Extensions, .ts/.tsx

When working with files containing types or types with JSX, we use the .ts and .tsx extensions. This allows us to incorporate all of the features TypeScript has to offer including syntax checks and type safety.

The web application we worked with in the last demo, customized Bootstrap components. In this demo, we will add types to restrict the use of dynamic variables. One component where types can be added is the custom Badge component /frontend/src/Components/Badge/Badge.tsx:

import { BadgeCoinType } from "../../types/BadgeCoinType";
import { BadgeDataType } from "../../types/BadgeDataType";

// Custom Bootstrap Badge Component
const Badge = ( props: { data : BadgeCoinType | BadgeDataType } ) => {
    // Destructure data
    const { data } = props;
    const { type } = data;

    // Check keys to verify type
    let messageValue = 'message' in data ? data.message : null;
    let dataValue = 'data' in data ? data.data : null;

    // Conditionally render components
    if ( messageValue ) {
        return (
            <span className={`badge text-bg-${type}`}>
                { messageValue.substring(0, 1).toUpperCase() + messageValue.substring(1) }
            </span>
        )
    }
    else {
        return (
            <span className={`badge text-bg-${type}`}>
                { String(dataValue) }
            </span>
        )
    }
}

export default Badge;

Notice how the object props is given a clear definition as to what it will represent. We are enforcing type safety here as there is a restriction as to what can be passed into the data attribute of the props object.

Sometimes a variable, function, or object should be allowed to take in more than one type and we can do this by using the union, | operator. In the props definition, we are using this operator to specify which custom types (covering this momentarily) are allowed.

After that, we conditionally check to see which type was passed in order to dynamically access the appropriate object keys for information and rendering.

Built-in, Special, and Custom Types

In TypeScript, there exist built-in primitive types some of which you might already know such as: number, boolean, and string.

There are also special types such as any which is the equivalent to accepting any data type. This should be used sparingly and in cases where it is vague to know what values are acceptable.

Remember, we are using TypeScript to enforce type safety and defining variables, functions, and objects using any is essentially JavaScript.

We can define custom types using interfaces. In the Badge component defined above, I make use of two custom types:

• BadgeCoinType — /frontend/src/types/BadgeCoinType.ts
• BadgeDataType — /frontend/src/types/BadgeDataType.ts

Here are the interfaces:

// Badge Coin Type interface
export interface BadgeCoinType {
    type: String,
    message: String
}

// Badge Data Type interface
export interface BadgeDataType {
    type: String,
    data: String
}

Rather than using objects, creating custom types in your code will remove vagueness and provide clarity as to what is acceptable. It also makes the codebase more compact and TypeScript will be able to infer the different keys for a given type.

In the Badge component, we are able differentiate the two interfaces by their message and data attributes. Since we know there are only two types acceptable, we successfully determine what type was passed.

Another component, where we can incorporate types is the CoinPriceCard component /frontend/src/Components/CoinPriceCard/CoinPriceCard.tsx:

import Badge from '../Badge/Badge';

// CoinPriceCard Custom Bootstrap Card Component
const CoinPriceCard = (props: { cardData: { coinType: String, coinData: any }}) => {
    const { coinType, coinData } = props.cardData;

    return (
        <div className="coin-price-card">
            <div className="card" style={{ width: "18rem" }}>
                <div className="card-body">
                    <Badge data={{ type: "warning", message: coinType }} />
                    <hr />
                    <p className="card-text">Price: 
                        <b>
                            { "$" + coinData[Object.keys(coinData)[0]].usd + " USD" }
                        </b>
                    </p>
                    <p className="card-text">24 Hr Price % Change:
                    { 
                        coinData[Object.keys(coinData)[0]].usd_24h_change > 0 ?
                            <Badge data={{ 
                                type: 'success', 
                                data: "+" + coinData[Object.keys(coinData)[0]].usd_24h_change.toPrecision(4) + "%" }}
                            /> 
                            :
                            <Badge data={{ 
                                type: "danger",
                                data: coinData[Object.keys(coinData)[0]].usd_24h_change.toPrecision(4) + "%" }}
                            />
                    } 
                    </p>
                </div>
            </div>
        </div>
    )
}

export default CoinPriceCard;

Like the Badge component, we are providing props a custom definition and defining the acceptable types for the cardData object.

As you can see, we are making use of a primitive type (String) as well as a special type (any).

Notice that we have to provide the exact definition of the type of data acceptable as a property to the Badge component. We know there are only two types acceptable, so the object passed in must match either one of those custom defined types.

The rest is pretty much the same as before.

Finally, the main page where all the great things happen can also contain various different types. I am talking about the PricePage component /frontend/src/Components/PricePage/PricePage.tsx:

import { FC, FormEvent, useState } from 'react';
import Alert from '../Alert/Alert';
import CoinPriceCard from '../CoinPriceCard/CoinPriceCard';
import { BTCInformationType } from '../../types/BTCInformationType';
import axios from 'axios';

// Custom Price Page Component
const PricePage: FC = () => {
    const [coinSelection, updateCoinSelection] = useState<String>('ethereum');
    const [setCoinSelection, updateSetCoinSelection] = useState<String>('ethereum');
    const [isSuccess, updateSuccess] = useState<Boolean>(false);
    const [btcInformation, updateBtcInformation] = useState<BTCInformationType>();
    const [altCoinInformation, updateAltCoinInformation] = useState<any>();

    const formHandler = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        updateSetCoinSelection(coinSelection);
        updateSetCoinSelection(coinSelection);

        // Fetch Bitcoin Data
        axios.get("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin" + 
            "&vs_currencies=usd&include_24hr_change=true")
        .then(response => {
            updateBtcInformation(response.data);
            updateSuccess(true);
        })  
        .catch(() => {
            updateBtcInformation(undefined);
            updateSuccess(false);
         });

        // Fetch Alt Coin Data
        axios.get(`https://api.coingecko.com/api/v3/simple/price?ids=${coinSelection}` + 
            "&vs_currencies=usd&include_24hr_change=true")
        .then(response => {
            updateAltCoinInformation(response.data);
            updateSuccess(true);
        })  
        .catch(() => {
            updateAltCoinInformation(undefined);
            updateSuccess(false);
        });
    }

    // Display content of form and coin data, if applicable
    return (
        <div className="price-page">
            <h1  style={{ marginTop: '1rem', marginLeft: 'auto', marginRight: 'auto', width: '50%' }}>
                Prices Page
            </h1>
            <p style={{ marginLeft: 'auto', marginRight: 'auto', width: '50%' }}>
                <i>Select crypto price data to be displayed</i>
            </p>
            { isSuccess ? <Alert /> : null }
            <form style={{ marginLeft: 'auto', marginRight: 'auto', width: '50%', marginTop: '1rem' }}
                onSubmit={ formHandler }>
                <select name="coin-selection" onChange={ e => updateCoinSelection(e.target.value) }>
                    <option value="ethereum">Ethereum</option>
                    <option value="solana">Solana</option>
                </select>
                <br />
                <button style={{ marginTop: '1rem' }} 
                    className="btn btn-success" type="submit">Request Information
                </button>
            </form>
            {
                !isSuccess || !btcInformation || !altCoinInformation 
                    ? null 
                    :
                        <>
                            <h3 style={{ marginTop: '1rem' }}>Coin Information</h3>
                            <div style={{ marginLeft: 'auto', marginRight: 'auto', width: '50%' }} 
                                className="container">
                                <div className="row">
                                    <div className="col">
                                        <CoinPriceCard 
                                            cardData={{ 
                                                coinType: 'Bitcoin', 
                                                coinData: btcInformation }} 
                                        />
                                    </div>
                                    <div className="col">
                                        <CoinPriceCard 
                                            cardData={{ 
                                                coinType: setCoinSelection, 
                                                coinData: altCoinInformation }}
                                        />
                                    </div>
                                </div>
                            </div>
                        </>
            }
        </div>
    )
}

export default PricePage;

Mostly the same as before, except for the different type definitions which we will go over in detail. Starting at the top, we can define the custom React component with a type for itself known as, FC or functional component.

TypeScript can infer types even if one is not defined explicitly. Had we not written this bit, it would have known that this is a functional component.

Unlike JavaScript, where we define hooks with no types, we can define hooks with types in Typescript using the <> brackets. We can include custom types as well such as the BTCInformationType (we will go over it momentarily).

For function definitions, we can define the type each parameter as well as the return type of a function. In the formHandler function, we know we are going to be handling a form event such as submit.

TypeScript includes a built-in type for handling these known as FormEvent. This allows us to successfully prevent page refreshes on each submit request.

Here is the custom type mentioned earlier containing Bitcoin API information /frontend/src/types/BTCInformationType.ts:

// Interface for BTC information
export interface BTCInformationType {
    bitcoin: {
      usd: Number,
      usd_24h_change: Number
    }
}

Notice how we are mapping this custom type to the body of the successful API response object. This allows us to effectively access all the required data more easily and makes the codebase more compact.

TypeScript will be able to map the custom type definition to the API response appropriately.

And finally, the CoinPriceCard components contain the coinData attribute with the object definition matching what was deemed acceptable within the CoinPriceCard component.

That is all for the code overview! Feel free to explore more of the repository if you like, but these three components are the only ones incorporating types.

Demo Time!

Alright, now it is time for the demo! As mentioned earlier, we are working with the same crypto price tracker application we built last time except this implementation uses TypeScript.

There is no back-end as we are making API requests on the client-side. We can do this as these APIs are open and require no authorization.

We will use the default port 3000.

Assuming you have cloned the repository from above, running npm start with /demos/Demo14_TypeScript_React/frontend as the present working directory, you should see the following:

Navigating to the coin prices option and selecting the Ethereum option, you should see the following:

Nothing changes right? It is all the same as before. Whatever is displayed on screens can be the same except their implementations can be entirely different.

If you move on and select the Solana option, you should see the following:

That is pretty much it for the demo. We verified everything works the same as before using TypeScript.

Conclusion

We did a deep dive into using TypeScript with React.js. We touched base on some of the core concepts related to TypeScript and saw that the application did not waver from its intended operation.

We explored type safety, type inference, built-in/special/custom types, the tsconfig.json file, file extensions, interfaces for defining types, and so much more.

There is a lot more you can do with TypeScript.

Links to the GitHub repository and the official TypeScript site are listed below:

• GitHub Repository
• TypeScript Website

I hope you enjoyed this article and look forward to more in the future.

Thank you!