Unlock the Power of TypeScript: A Guide to Building Reusable Components

Why TypeScript Matters

TypeScript has revolutionized the development experience by catching errors and suggesting fixes before code execution. This prevents runtime errors and reduces bugs, making it an essential tool for any developer. By extending JavaScript to add types and perform type checking during development, TypeScript ensures that all type errors are fixed prior to running the code.

Building a Reusable Display Component

To demonstrate the power of TypeScript, we’ll create a simple display component that takes in data and shows it to the user.

Setting Up the Application

First, install create-react-app and create a new application using the TypeScript template:

npx create-react-app my-app --template typescript

Then, install react-router-dom and @types/react-router-dom to enable minimal routing in our application:

npm install react-router-dom @types/react-router-dom

Creating Pages and Routing

Create two new directories in your src folder: pages and DisplayData. Inside the pages folder, create two files: WithTS.tsx and WithoutTS.jsx. These files will contain functional components that pass data into our reusable display component.

Building the Display Component

In the DisplayData directory, create two files: DisplayData.jsx and index.ts. Our display component will take in a data prop, which it uses to fill information about a fictional character and display it to the user.

import React from 'eact';
import PropTypes from 'prop-types';

interface DisplayDataProps {
  name: string;
  age: number;
}

const DisplayData: React.FC<DisplayDataProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default DisplayData;

Adding TypeScript Compatibility

To make our component compatible with TypeScript, we need to add TypeScript configuration to enable type checking when used within a TypeScript file.

interface DisplayDataProps {
  name: string;
  age: number;
}

declare module 'DisplayData' {
  export default React.ComponentType<DisplayDataProps>;
}

The Result

With our component set up and working, we can now switch between the two pages in our app and see the data displayed correctly. By using TypeScript, we’ve ensured that our component is type-safe and can be used seamlessly in codebases with either JavaScript or TypeScript files.

Take Your Development to the Next Level

TypeScript’s type checking ability makes it an invaluable tool for any developer. By incorporating TypeScript into your workflow, you can catch errors early, reduce bugs, and improve your overall development experience.