DEV Community

Cover image for Understanding TypeScript
Debbie O'Brien
Debbie O'Brien

Posted on • Originally published at debbie.codes

Understanding TypeScript

TypeScript is a superset of JavaScript. Any types that are added are not part of the final bundle so really TypeScript is there to make your life easier as a developer. It took me years to accept TypeScript. I always wanted to learn it. It was on my long list of todos but I found it complicated and unnecessary and therefore chose not to prioritize it and most importantly not to use it in any of my projects.

Then it got forced upon me and I had no choice but to learn it while at the same time learning a new framework. That was very hard indeed as I wasn't sure if I was learning something React or something TypeScript. Separating the two would have been a whole lot easier.

Why TypeScript?

But I have to say that once you understand even some of the basics of TypeScript and start to use it in your code it really does make your life easier.

TypeScript is not there to complicate things but to help you not make mistakes. Yes it will scream at you and underline everything in red but it's telling you there is a problem and that if you don't fix it then probably something will break either now or in the future. This is actually really helpful and prevents bugs.

In JavaScript we would just allow anything to happen and fix it later which is never a good idea really. I actually believe that TypeScript should be introduced early in the learning of JavaScript cause trust me, once you use it you won't go back and today more and more codebases are being rewritten in TypeScript so it is by far the future.

What exactly does TypeScript do?

TypeScript is about checking your types. What do I mean by that? When you have props that you pass down into your components, for example a name prop then this prop should only accept a string. If someone passes it a number then TypeScript will simply not allow it as it checks the types and a number is not the same type as a string. We basically need to define these types when we are passing our props.

const Button = (props: { buttonText: string }) => ({
  <button>{props.buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

In the above example we pass down props and use the semicolon to define the props. The props are added as an object with the name of the prop followed by a semicolon and the type the prop is allowed to be, which in this case is a string.

Defining Types

In this post I will be using Types instead of Interfaces which are very similar but have some small differences. There is no right or wrong here so use whatever works best for you.

Types can be defined as any of the primitive values:

  • string
  • number
  • boolean
  • [] an array
  • string[], an array of strings (change to number for an array of numbers etc)
  • "primary" | "secondary", set a specific value
  • {}, any type of object

Defining Object Types

You can get even deeper here and define the shape of an object, for example an object that takes an id of string and a title of string or an array of object types

type Items{
  id: string,
  title: string
}[]
Enter fullscreen mode Exit fullscreen mode

This can also be cleaned up further by creating a type of item an then passing that to the array

type Item = {
  id: string
  title: string
}

type ComponentProps = {
  item: item
  items: items
}
Enter fullscreen mode Exit fullscreen mode

Defining Array Types

We can define an array where all keys have to be a number and the value has to be a string

type Items = {
  [key: number]: string
}
Enter fullscreen mode Exit fullscreen mode

Or we could make all keys a string and the value has to be of the type Item which was previously defined.

type Items = {
  [key: string]: Item
}
Enter fullscreen mode Exit fullscreen mode

This is a pretty simple way to define the props but you can imagine it getting very hard to manage if there were multiple props so adding the types inline might become a nightmare. This is one of the main reasons why we separate the props

Defining Function Types

You can also define types for functions:

Function takes no arguments and does not return anything.

type ButtonProps = {
  onHover: () => void
}
Enter fullscreen mode Exit fullscreen mode

Passes in the id of type number and returns nothing, eg undefined

type ButtonProps = {
  onChange: (id: number) => void
}
Enter fullscreen mode Exit fullscreen mode

Takes an event that is based on clicking the button and returns nothing. Notice the <HTMLButtonElement>, this means pass in all the available props that the HTML Button provides so it knows you might want to have access toevent.target for example.

type ButtonProps = {
  onClick(event: React.MouseEvent<HTMLButtonElement>): void
}
Enter fullscreen mode Exit fullscreen mode

When creating functions we can even define the types of what gets passed in as well as what gets returned. However TypeScript is clever enough that it knows if you pass in a as a number and b as a number and you and you return a + b then the return value will be a number so there is not need to define that.

const add = (a: number, b: number): number => {
  return a + b
}
Enter fullscreen mode Exit fullscreen mode

Separating your Types

We previously added our button with the buttonText prop containing the type of string. If our button has more types this would be really hard to maintain. This is one reason why we separate our types from here but also if we do separate them we can then export them and use them in other components.

From this:

const Button = (props: { buttonText: string }) => ({
  <button>{props.buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

To this:

export type ButtonProps = {
  buttonText: string
}


const Button = (props: ButtonProps) => ({
  <button>{props.buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

Again we can improve it further by using the names of the props instead of using the props keyword and adding them in curly brackets to destructure them.

export type ButtonProps = {
  buttonText: string
}

const Button = ({buttonText}: ButtonProps) => ({
  <button>{buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

Optional Props

To make props optional we can add a question mark to the end of the type. TypeScript will then only check it's type if it is passed in.

export type ButtonProps = {
  buttonText: string
  variation?: 'primary' | 'secondary'
}


const Button = ({buttonText}: ButtonProps) => ({
  <button>{buttonText}</button>
})

// or

const Button = ({buttonText, variation}: ButtonProps) => ({
  <button variation="primary">{buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

Improving your Props with Comments

Comments are a great way to help others understand what your props are for.

export type ButtonProps = {
  /**
   * a text for the button
   */
  buttonText: string
  /**
   * the variation of the button
   */
  variation?: 'primary' | 'secondary'
}


const Button = ({buttonText, variation}: ButtonProps) => ({
  <button variation="primary">{buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

Adding default Values

Default values can be added to your props by giving it a value as you pass it into the function. Then if someone doesn't define a value for that prop the default will be used.

export type ButtonProps = {
  /**
   * a text for the button
   */
  buttonText: string
  /**
   * the variation of the button
   */
  variation?: 'primary' | 'secondary'
}

// add to cart is the default value of the button text

const Button = ({buttonText = "add to cart", variation}: ButtonProps) => ({
  <button variation="primary">{buttonText}</button>
})
Enter fullscreen mode Exit fullscreen mode

Conclusion

TypeScript might take a bit of extra work at the start as you define your types but that little bit of extra work can really save you some time later on. I highly recommend giving it a try and just starting to slowly introduce it in your codebases.

Useful Links

Discussion (4)

Collapse
lukeshiru profile image
LUKESHIRU

Possible typo: You're not using variation, and the returned valued shouldn't have {} surrounding the JSX. Plus the variation property doesn't exists in native buttons, so you might want to use className instead? I believe the code should actually be like this:

export type ButtonProps = {
    /**
     * a text for the button
     */
    buttonText: string;
    /**
     * the variation of the button
     */
    variation?: "primary" | "secondary";
};

export const Button = ({
    buttonText = "add to cart",
    variation
}: ButtonProps) => <button className={`btn-${variation}`}>{buttonText}</button>;

// Usage
<Button buttonText="Hello!" variation="primary" />;
Enter fullscreen mode Exit fullscreen mode

There are a few improvements that can be made to that Button component both from the React perspective, and from TypeScript. Instead of just using a button, you can "extend" it by making use of a React type called IntrinsicElements, and in top of that, the button text is just its children, so you can reuse that prop instead of having a custom prop for it. So the code could look something like this:

import type { FC } from "react";

export type ButtonProps = JSX.IntrinsicElements["button"] & {
    /**
     * the variation of the button
     */
    readonly variation?: "primary" | "secondary";
};

export const Button: FC<ButtonProps> = ({
    children = "add to cart",
    className = "",
    variation,
    ...props
}: ButtonProps) => (
    <button className={`btn-${variation} ${className}`} {...props}>
        {children}
    </button>
);

// Usage
<Button variation="primary">Hello!</Button>
Enter fullscreen mode Exit fullscreen mode

Hope it's helpful ^_^
Cheers!

Collapse
debs_obrien profile image
Debbie O'Brien Author

hey, thanks for the reply and detailed answer. looks good. I still havent dived into intrinsicElements yet so will take a look at them. And you're right. I need to use children more. My next post will be on children. As for variation yeah looks good with the btn- which makes it clear why it's there. My quick example is probably not that useful and I do have it in production with a function that creates the classname depending on the prop passed in but that was taking it one step further. so much to learn...... :) thanks again

Collapse
rammina profile image
Rammina

Great, well-written guide on how to get a beginner started on Typescript. I'm just happy to see Typescript getting the love it deserves.

I would like to add to this discussion, some case scenarios in which Typescript should NOT be used because of its certain downsides:
dev.to/rammina/downsides-of-typesc...

Collapse
debs_obrien profile image
Debbie O'Brien Author

great thanks. will check it out