Basic Types in TypeScript

The intent of this article is to build off existing knowledge of basic JavaScript data types and offer new developers a glimpse at what TypeScript offers. TypeScript is a superset of JavaScript so a strong foundational knowledge of JavaScript isn’t a must but will only help. For the sake of brevity I will assume that you, the reader, knows the basics of JavaScript and will leave out the basic data types of TypeScript that were already present in JavaScript.

Photo by Steve Halama on UnsplashArray

I left arrays out of my JavaScript article on data types because technically they are considered objects in JavaScript. TypeScript doesn’t do anything new with this data type, its still the classic backbone of computer science but TypeScript does make an array its own data type. Arrays hold a single data type/value and can be declared in two ways:

let myArray: number[];let myArray: Array<number>; //generic syntax

I tend to see the first example most often, in my opinion it is a little cleaner than the generic syntax and follows the syntax seen in many other programming languages.

Tuple

A tuple is another common programming data structure seen in languages like Python and C#. Unlike an array, a tuple can store a collection of varied data types. They are index based meaning that, like arrays, the individual values stored in the tuple can be selected using their numeric, zero based index.

let myTuple:[boolean, string];

There is a caveat with tuples, what happens if we try to add to a tuple outside of the known length? Say we try to push a third value to the tuple below:

let myTuple:[boolean, string] = [true, "sigma"];

What will happen here? TypeScript works some magic and uses whats called a union. If you need a refresher on unions the quick and dirty explanation is that the third value we add to the tuple can be either data type declared. If you want to know more this reddit post elaborates and covers how to improve your tuples by adding a tail.

Enum

Enums in TypeScript are the same as other languages, they are a set of predefined and related constants.

enum Fish {Bass, Trout, Salmon}let catch: Fish = Fish.Bass;

It’s helpful to know that enums map to numeric values behind the scenes. By default the numeric values of enums are 0 indexed but they can also be set to any value the developer chooses, in the example below I set Bass’s index to 1 instead of the default 0. Now knowing this I can set catch using the numeric value of Bass in my enum. My personal opinion is this makes the code less human readable and should generally be avoided.

enum Fish {Bass = 1, Trout, Salmon}let catch: Fish = Fish[1];

Photo by Pankaj Patel on UnsplashAny

I think of any as what var is from vanilla JavaScript. Any is telling TypeScript the variable may be dynamic content or that it could be subject to change types and that the variable should be omitted from compile time checks. Any is powerful in the fact that it can let the developer skip compile checks but because of this reason it should be used as a last resort not a first option. The beauty of TypeScript is that is allows developers to define types, any makes this irrelevant by being an ambiguous data type.

let idk: any = 4;

A great use case for any is working with data where you may only know part of the types stored. In the example below we have an array of many different types and are able to use any to keep the array intact.

let mixedArray: any[] = [1, "fish", false];mixedArray[0] = "replace number with string";

Void

Void is the opposite of any, it indicates the absence of a type. This is commonly seen when a function doesn’t return a value. While you can declare a variable as void it isn’t the most useful since the variable can then only be assigned undefined or null.

function returnsNothing(): void {};let voidVar: void = null;

Never

Introduced in version 2.0, never represents values that can never occur. Never is used in functions that never return and with variables that have impossible types.

//function that never returnsfunction infinteLoop(): never{while(true){}}

// impossible typelet impossible;if (typeof impossible === "string" && typeof impossible === "number"){     impossible //type is never}

I have rarely seen a function or variable with the explicit type of never but it is important to know that this type exists. Some of the more realistic examples of never I have seen are with error handling functions.

Conclusion

Types are nothing new in programming but knowing them is essential to using TypeScript. By allowing type enforcement TypeScript takes JavaScript from the dynamically typed language it is and adds a layer of clarification with a static typed approach. Knowing how to take full advantage of these types will make your code more readable to others and improve the maintenance of your code.

Basic Types in TypeScript was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.