Photo by Juan Gomez on Unsplash

Let’s Talk Typescript

I’m taking a break from data structures this week to talk about something that came up in a job interview and I have been meaning to learn more about, TypeScript.

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types give developers better insight into the shape of an object by describing the shape when you define your object. TypeScript then validates your code is working properly through type checking. Best of all JavaScript is valid TypeScript so it isn’t going to break your existing application.

At run time, TypeScript is going to be compiled into JavaScript meaning it can run anywhere JS normally runs. It’s also super easy to get started with. You can start working with TypeScript one component at a time. Type Inference and JSDoc can give you simple stepping stones that allow you to make the switch gradually.

A note about the Docs:

TypeScript’s documentation is awesome. It is concise and easy to understand, it offers plenty of snippet examples and has different sections based on what programming you have done before seeking to learn TypeScript.

For this blog, we are going to run through some of the essential information about defining a type.

Type inference:

If a type is not explicitly stated TypeScript is going to do its best to read your mind and infer the types you are thinking. If you were creating an object with a name: string and age: number, you could write =>

const user = {
   name: "Robert",
   age: 29,
}

You could explicitly define this object’s shape with the interface keyword:

interface User {
   name: string;
   age: number;
}

Then you can add this definition to variables you create

const user: User = {
   name: "Robert",
   age: 29
};

If you try to create an object with info that doesn’t match the interface you defined, TypeScript will throw a warning. For example with our User from above…

const brokenUser: User = {
   username: "a valid string",
Type '{ username: string; age: number }' is not assignable to type 'User'.
Object literal may only specify known properties, and 'username' does not exist in type 'User'
   
   age: 29,
};

Creating your own Types

TypeScript allows us to create complex types through the combination of simple ones. There are two common ways to do this. We are going to use the type keyword to create these custom types.

Unions:

A union let’s say that a type could be one of many types. For example, you could describe a set of strings or numbers that something is allowed to be

type BestCarColors = "black" | "blue" | "red"
type AreYouHome = "yes" | "no"
type MyLuckyNumbers = 7 | 10 | 12 | 25

Unions also allow us to handle different types as well. In the example below, we have a function that takes an array or a string

function getLength(obj: string | string[]) {
   return obj.length;
}

The typeof keyword allows us to check the type of an argument and proceed differently based on that information.

function basedOnType(obj: string | string[]){
if(typeof ob === "string") {
   // do something;
} else { 
   // do another thing;
  }
}

Generics:

Generics provide variables to types. An array is a good example. An array without generics could contain anything. An array with generics describes the values the array contains.

type StringArray = Array<string>;
type ObjectWithNameArray = Array<{name: string}>

In my limited experience with TypeScript, I can already say I love it. It’s helped me catch some bugs in my code that otherwise went unnoticed. It also gets me thinking with more clarity about what objects are going to contain and how functions are going to handle arguments and returns.

I’ve decided to take one of my recent React projects and start wotking on converting it to TypeScript. I hope to make the process a future blog.

Happy Hacking!

Resources:

Typed JavaScript at Any Scale.

Let’s Connect:

Robert Keller - Volunteer - Software Engineer - FightPandemics | LinkedIn

MisterRK - Overview