A quick and complete guide to TypeScript types

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is open-sourced, it was developed and maintained by Microsoft. TypeScript may be used to develop JavaScript applications for both client-side and server-side execution.

TypeScript is a statically typed language. A language is statically typed if the type of a variable is known at compile time. For some languages this means that you as the programmer must specify what type each variable is (e.g.: Java, C, C++); other languages offer some form of type inference, the capability of the type system to deduce the type of a variable.

Declaring types prevent many runtime errors and allow IDEs to do their magic and show you where the errors lie. If you’re coming from a typed language background like Java, you’d be used to seeing examples like this:

In the example above, if a string was added to the array, the compiler will throw a Compilation Error. This is what TypeScript brings to JavaScript, error and type checking.

Using types

In TypeScript, the type of a variable is defined on the right-side before variable declaration. If we wanted to define the type of a variable name, it’ll look like the snippet below:

const name: string = 'John';

Types can be used:

When declaring a variable

In function parameters

To type check the return value of a function

Variable declaration

When declaring a variable in TypeScript, we make use of the let and const keywords. You can type check Arrays, Strings, Numbers etc.

Arrays TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type:

Tuples Tuples allow you to declare an array where the type of a fixed number of elements is known, but need not be the same. For example, you may want to represent a value as a pair of a string and a number:

The last example is an Array with more than two characters, this didn’t error out because we supplied additional elements that were either a string or a number. If a boolean were to be added to the array, an error would be thrown.

Boolean A boolean is the most basic datatype. It is either true or false.

const isHappy: boolean = true;
const canDrive: boolean = 34; // error

String Strings in TypeScript can be used in one of three ways:

Double quotes.

Single Quotes.

Template literals.

Double quotes:

let name: string = "Peter";

Single quotes:

name = 'John';

Template literals: These are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification. These strings are surrounded by the backtick/backquote (“`) character, and embedded expressions are of the form ${ expr }.

Number In JavaScript, all numbers have the definitive type of number. All JavaScript numbers are floating point values, it is the same with TypeScript. TypeScript also supports binary and octal literals alongside hexadecimal and decimal values.

A handy feature of enums is that you can also go from a numeric value to the name of that value in the enum. For example, if we had the value 6 but weren’t sure what that mapped to in the Car enum above, we could look up the corresponding name.

enum Car { BENZ=2, TOYOTA, HONDA=6 }
const myCar: string = Car[6];

Any There are time where we may not know the types we are working with. That’s when we can use the any type. The any type lets us opt out of type checking.

The any type is very flexible. Even more so than the JavaScript object. With the any type, you can continuously opt in and opt out of type checking in your code.

let car: any = 'honda';
car.start(); // compiles

Void Void is almost a direct opposite of any, it depicts the absence of a type. It is commonly used to define the return type of a function.

function startCar():void {
console.log('Car started');
}

When declaring variables, defining the variable type as void isn’t really useful as you can only set the variable to either undefined or null.

Null and UndefinedNull and Undefined both have their respective types named after them. These types aren’t useful on their own because we can only assign Null and Undefined to a variable defined as a Null or Undefined type.

Naturally, null and undefined are subtypes of any types. So you can assign null or undefined to number or string.

Never The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns; Variables also acquire the type never when narrowed by any type guards that can never be true.

The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never. Some examples of functions returning never:

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.