TypeScript

React + TypeScript: Making a Custom Context Menu

Updated: March 3, 2023 By: A Goodman

This article walks you through an end-to-end example of creating a custom context menu in a React app that is written in TypeScript. We’ll use new features of React like hooks and functional components. You won’t…

React + TypeScript: Multiple Select example

Updated: March 3, 2023 By: A Goodman

The example below describes how to use a multiple select in a React project written in TypeScript. You will learn to get the selected values as well as display them on the screen. Everything will be…

React + TypeScript: Image onLoad & onError Events

Updated: March 3, 2023 By: A Goodman

The end-to-end example below shows you how to handle image events in a React app that uses TypeScript. There are 2 events that we are going to work with: Example App Preview The app we are…

React + TypeScript: Handling onClick event

Updated: September 6, 2023 By: A Goodman

The onClick event occurs when an element is clicked. This element can be a button, a div element, an image, etc. This article walks you through a couple of different examples of handling the onClick event…

React + TypeScript: Handling Keyboard Events

Updated: June 8, 2022 By: A Goodman

This article walks you through the basics and a few practical examples of handling keyboard events in a React app that is written in TypeScript. We’ll use modern React features including hooks and functional components. You…

React + TypeScript: Multiple Dynamic Checkboxes

Updated: March 3, 2023 By: A Goodman

This article walks you through an end-to-end example of handling dynamic checkboxes in a React application written in TypeScript. We’ll use hooks and functional components, not class components as well as old-fashioned stuff. The Example Overview…

React + TypeScript: Password Strength Checker example

Updated: March 3, 2023 By: A Goodman

This article walks you through a complete example of making a password strength checker in React and TypeScript. We will build it from scratch and will NOT use any third-party packages. In addition, we will use…

TypeScript: Intersection Type Examples

Updated: August 4, 2021 By: A Goodman

Below are 2 examples of Intersection Types in TypeScript. The first one uses Interfaces and the second one uses Type Aliases. Example 1: Intersection Types and Interfaces The code: Output: Example 2: Intersection Types and Type…

TypeScript Example: Default Function Parameters

Updated: August 15, 2021 By: A Goodman

The code snippet below shows you how to use default function parameters in TypeScript: Output: Important note: The parameters for which you don’t accept default arguments have to come first (stay on the left side). Further…

React + TypeScript: Using Inline Styles Correctly

Updated: March 3, 2023 By: A Goodman

When using inline styles in a React project that is written in TypeScript, you may encounter some annoying problems. For example, the code below: will result in an error like this: Similar errors can also occur…

React + TypeScript: Create an Autosize Textarea from scratch

Updated: March 3, 2023 By: A Goodman

This article walks you through a complete example of making an autosize (or auto-resize) textarea in a React project that uses TypeScript. We will use modern React with functional components and the following hooks: useState, useEffect,…

React + TypeScript: Handling Select onChange Event

Updated: March 3, 2023 By: A Goodman

A select element is a drop-down list with multiple options. In this article, we will examine an end-to-end example of handling the onChange event of a select element in a React web app that written with…

1 2 3