We’ve started learning and using TypeScript at Phiranno Designs to make our code a little more bulletproof.
Take this example:
The HorizontalPadding component is used to wrap elements so that we use a consistent amount of padding. This makes left-aligned text line up neatly and makes the overall design more polished.
Here is a breakdown of how it works:
The Variant enum (enumerated list) lists all the possible variants. We have a handful of colours to choose from, if I need another colour for whatever reason, we can update this component, otherwise TypeScript will enforce that we can only use one of the Variants we have set up.
The IHorizontalPadding interface lets us describe the types of props the HorizontalPadding component can receive.
In this case we have the as prop which can let us change the type of element from a div to any other HTML element. The question mark means this field is not required, and string means it expects to receive some text. We can use it like this:
The children prop is a special property that React provides to make it easier to write JSX that looks similar to HTML.
Notice we don’t need to write “children” anywhere, we just put the child element(s) inside of HorizontalPadding’s angled brackets.
The final prop is variant. This lets us choose one of the values from the enums we set up earlier.
Here is an example of using the HorizontalPadding component with a variant:
Next the HorizontalPadding component itself.
This is a React component that accepts the 3 props that we descripted in the IHorizontalPadding interface above. Both as and variant are provided a default value so that we don’t alway need to provide one (in this case the string “div” and the variant Variant.TRANSPARENT).
Finally we use the React.createElement function to create a new element based on the props that it has received. React.createElement accepts 3 parameters — the element to create, a props object, and a children component.
The only prop that we’re using is the className prop so that we can set the padding as well as any values set from the chosen variant.
Finally we attach a .variant property to the HorizontalPadding component, so that we don’t need to export/import anything more than the HorizontalPadding component.
Now that might seem like a lot of extra work for a relatively simple component, but TypeScript gives us a ton of benefits:
If I miss a required prop, or use the component incorrectly, TypeScript can let me know about that:
In this case it is telling us that the children prop is required.
Since we’ve gone to the trouble of listing all the different variants, TypeScript can see this and will display them inline — saving us time and ensuring we don’t make a typo.
Even if we did make a typo, TypeScript will pick that up and show us a useful error!
How cool is that, TypeScript can tell that ‘green’ is pretty close to ‘GREEN’ and offers us that as a suggestion!
TypeScript helps you write better code
By writing our code in TypeScript we’re forced to think more about how we author components, but it also saves us from a lot of potential errors.
We’re fully on board with TypeScript now, and are planning to use it on all new projects where possible. Once you get over the initial learning curve, the benefits are huge! You start out a little slower, but you spend less time debugging and are less likely to run into major bugs meaning happy clients, and happy developers!