Essential TypeScript Types  –  Get Started with TypeScript

TypeScript provides the ability to add typed variables to your JavaScript code. This article will cover the core types that are essential for any TypeScript developer and provide a starting point to begin using the language.

To begin using TypeScript, you must have the compiler installed which can be done through npm. Followthis article if you would like a more in-depth guide to installing and getting started with TypeScript. Be sure that you are always working in a  .ts file and compiling your code using tsc .

Primitive Types

TypeScript provides types that cover the primitive values of JavaScript: string , number , boolean .

To declare a variable type, you can simply add colon : next to the declaration followed by the variable type.

TypeScript is also able to infer types based on the first variable declaration, so in the previous instance, the types are not actually required for TypeScript to correctly identify the variables.

VS Code inferring the type on hover

A use-case for declaring types would be a function definition. You define the parameters sothat the function is always invoked correctly.

TypeScript has very clean syntax to handle arrays. You define the type of values in the array follow by braces [] .

Objects as Interfaces

Objects are at the core of JavaScript’s key characteristics. They serve as a way to define collections of data using key/value pairs. TypeScript allows you to define the data on an object by using an interface definition.

Notice that the syntax looks similar to to the object syntax in JavaScript. The word interface comes before the name. The name itself is typically capitalized and there is no = before the bracket. The lines end in  ; instead of a comma  , .

When defining a function on an interface, you define the types of the arguments and the type of the return value. In this case, it takes a single argument number and then returns a number .

To define an array of objects, the syntax is identical to defining it with primitive types. You use the name of the interface followed by braces. Below is an array of Product objects.

While the concept of extending interfaces is more advanced, I’ll introduce here to provide familiarity. There can be cases when you want to create a base interface and then have other interfaces that inherit from it. For example, we previously created a Product interface which defines the essential values that belong to a product. We could now create specialized products which will receive all the properties of the original product as well as new ones defined on the interface. This is done using the word extends .

Our Computer interface contains all the properties associated with a Product as well as it’s own unique properties. By extending interfaces, you are able to reduce code duplication and create logical base cases.

Null and Undefined and Unions

TypeScript provides built-in types for both null and undefined which are defined by using their names.

By themselves, this is not too useful. However, you can combine types in TypeScript by using a union indicated by a | .

In this case, favoriteAthlete can either be a string or it can be null . Not everyone may care about sports :)

Since undefined values are common in objects, there is a special syntax for indicating that a key/value is optional (meaning it will be undefined if not added). This is accomplished by adding a  ? next to the key name.

Special TypeScript Types

TypeScript has added types that are not native to JavaScript but allow you to write more robust code. It is worth noting that these will still compile to native JavaScript code but are added to TypeScript for improved usability.

Enum:Create named maps in TypeScript

Any:It will work with any value and not throw a TypeScript error. any should only be used if the value can truly be anything or it’s unknown, and you are prepared to handle that in your code.

Void: void is the opposite of any — the value has no type at all. Void is used most commonly with functions that do not return.

Wrap Up

If you can learn these fundamental TypeScript types, you are well on your way to being able to use the language. In fact, these will cover probably cover at least 80% of your use-cases in daily coding, and you should now be able to dive in and start working with TypeScript. When you feel ready, check out some more advanced TypeScript examples .