In this quick tip, excerpted from Unleashing the Power of Typescript, Steve shows you how to extend the properties of an HTML element in TypeScript.In most of the larger applications and projects I’ve worked on, I often find myself building a bunch of components that are really supersets or abstractions on top of the standard HTML elements. Some examples include custom button elements that might take a prop defining whether or not that button should be a primary or secondary button, or maybe one that indicates that it will invoke a dangerous action, such as deleting or removing a item from the database. I still want my button to have all the properties of a button in addition to the Props I want to add to it. Another common case is that I’ll end up creating a Component that allows me to define a label and an input field at once. I don’t want to re-add all of the properties that an element takes. I want my custom component to behave just like an input field, but also take a string for the label and automatically wire up the htmlFor prop on the to correspond with the id on the .In JavaScript, I can just use {...props} to pass through any props to an underlying HTML element. This can be a bit trickier in TypeScript, where I need to explicitly define what props a component will accept. While it’s nice to have fine-grained control over the exact types that my component accepts, it can be tedious to have to add in type information for every single prop manually.In certain scenarios, I need a single adaptable component, like a
, that changes styles according to the current theme. For example, maybe I want to define what styles should be used depending on whether or not the user has manually enabled light or dark mode for the UI. I don’t want to redefine this component for every single block element (such as , , , and so on). It should be capable of representing different semantic HTML elements, with TypeScript automatically adjusting to these changes.There are a couple of strategies that we can employ:In this tutorial, we’ll look at the first strategy. Let’s start with that first example mentioned in the introduction. We want to create a button that comes baked in with the appropriate styling for use in our application. In JavaScript, we might be able to do something like this:In TypeScript, we could just add what we know we need. For example, we know that we need the children if we want our custom button to behave the same way an HTML button does:You can imagine that adding properties one at a time could get a bit tedious. Instead, we can tell TypeScript that we want to match the same props that it would use for a
This post first appeared on
VedVyas Articles, please read the originial post:
here
