ClickCease
Most recent:

Learning TypeScript.

Don't miss out on the latest news

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.

Next we have the VARIANT_MAPS which is a JavaScript Object that we can use to look up what properties each variant should have. Notice that Variant.GREEN and Variant.BLACK both change the text colour to white as well as the background colour (those are Tailwind classes, but it should be reasonably clear from the name what they do). Since green and black are fairly dark colours, we need to invert the text so it is still readable.

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:

Useful errors

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.

Autocomplete

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.

Conclusion

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!