Write React functional components and Hooks with TypeScript

Write React functional components and Hooks with TypeScript

TypeScript is a statically typed language and it complies to JavaScript. Statically typed code is easier to maintain and harder to break

This article assumes that you are already a bit familiar with React and a bit of TypeScript. If you are not, then don’t worry I have got you covered. Go through resources below and play around with examples before proceeding with this article:

I won’t waste any of your time and directly jump into the real stuff now.

Setting up the project 👨‍💻️

We are not discussing how to set-up a React project with TypeScript from ground zero in this article. It is always good to keep things simple while starting. I have already got you covered with a GitHub template to get started without any setups. You can decide to fork the repo or just use the template to start a new project. This repo already comes with prettier, eslint, TypeScript and React setup. Bootstrapped with CRA. Find it here. Check out official React doc if you want to do your own React + TypeScript setup.

TypeScript generics refresher

Generics are tools to build re-usable software pieces. It gives us the flexibility of not tightly coupling the pieces with the types. Allowing us to re-use the code with different types while also maintaining type safety.

In TypeScript, generics are like a placeholder for types which can be inserted dynamically. An example will make things clear.

We are implementing a small function called SimpleStack for holding a list of some items. If we implement it without generics our SimpleArray declaration will only be able to hold one type of values.

type SimpleStackType = {
  data: Array<string>;
  push: (item: string) => number;
  pop: () => string;
};

The declaration above only allows us to make a stack of strings. If we want to make a stack of number with the above approach we need to declare a new type, replacing the string type with the number type. Now let's see the generic examples.

type SimpleStackType<T> = {
  data: Array<T>;
  push: (item: T) => number;
  pop: () => T;
};

T in the code above is a placeholder for a type. We can pass anything to T and the SimpleStackType will work as the type of T. Now an example of usage:

let stringStack: SimpleStackType<string>; // this like the first example with strict type of string
// but we are not limitted.

let numberStack: SimpleStackType<number>;
type Person = {
  name: string;
  age: number;
};
let personStack: SimpleStackType<Person>;

javascript typescript web-development programming react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Make an App with React JS / JavaScript: React and TypeScript

Building a Web Application as a Front-End Developer using React JS and TypeScript! Learn how to use the “Thinking in React” method and apply it to your real web application. We will be using real live weather data to display in our application and make our components reusable and maintainable.

TypeScript Tutorial For JavaScript Developers - TypeScript Basics

TypeScript Tutorial For JavaScript Developers - TypeScript Basics. I will show you guys 4 example of JavaScript code, and how to convert it to TypeScript. This is a typescript beginners tutorial.

How to Migrate a React Component from JavaScript to TypeScript

Learn how to easily migrate a React component from JavaScript to TypeScript to improve your project. When migrating over to TypeScript, one basic thing to keep in mind is TypeScript files have a .ts extension instead of .js. Another thing to keep in mind that makes migrating over a breeze is that you can configure your TypeScript compiler to allow JavaScript files.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers