TypeScript Language Features#


In this section, we dive deep into TypeScript's language features. We start by reviewing the fundamentals, including: type aliases, primitive types, arrays, objects, and functions. Then we explore the ECMAScript features available to TypeScript, covering the major features introduced in ES2015.

To run our code snippets, we'll be using the official TypeScript Playground: http://www.typescriptlang.org/play/

Go ahead and check all of the available options in the "Options" tab of the playground:

Enabling all Playground Options

The gist of these options are that we are enabling flags that help prevent code smells and force us to code against stricter rules (hence the strict prefix).

Using the Playground allows us to focus on the features without worrying about configuring the infrastructure surrounding our project. There's also the added benefit of seeing the generated JavaScript in real-time, which can be especially useful when we want to examine how TypeScript constructs are mapped to ES5-compatible JavaScript (the Playground does not currently support targeting newer runtimes).

We'll start by covering an extremely useful feature that we will use throughout the rest of the book: type aliases.

Type Alias#

Type aliases allow us to assign names to type expressions. By doing so, we avoid having to rewrite those expressions and we are able to give meaningful names to our types. In the example below, we use a type alias to define a StudentId type:

The right-hand side of the = symbol must be a type expression, which may be another type or the result of operating on several types (such as a union or intersection of types, which we'll learn about later in the chapter). We cannot use a runtime expression, such as a function call or the result of a mathematical operation.

StudentId can be used as the type of our variables:

Because our StudentId is just a reassignment of string, the lines above are equivalent to:

Using type aliases over simply using string gives us two benefits:

  1. Our code is more readable as we now know that firstStudent and lastStudent refer to unique identifiers as opposed to generic strings, which can have multiple interpretations (i.e. a student's name).

  2. The logic behind the StudentId type is centralized. If there is ever a need to change the definition of StudentId (i.e. from using string to using number), we can make the change in one location while being warned of any type errors resulting from the change.

Type aliases are exportable, so we can export StudentId using the export keyword and use it throughout our application:

Note that imports and exports are not testable through the TypeScript Playground.

To import StudentId from another file, we use the import keyword and the name of the imported type:

We'll cover imports and exports in-depth in the TypeScript Modules section of this chapter.

To sum it all up: type aliases are useful for centralizing logic, giving meaningful names to types, and even shortening lines that contain long type expressions. In many cases, they can make code more readable and succinct, so we use them liberally throughout our code.

Primitive Types#

Primitive types are a set of pre-defined types that cannot be broken up into smaller types. They are the building blocks of more complex types, such as arrays and objects.

In TypeScript, the primitive types are:

  • number

  • string

  • boolean

  • null

  • undefined

  • void

  • symbol

  • bigint

In this section we'll cover every primitive except for symbol (ES2015) and bigint (ESNext), which are covered in another chapter, Advanced Language Features.

Before diving into our primitives, let's discuss a common pitfall: using Number, String, and Boolean over their lowercase counterparts: number, string, and boolean. In general, you should never use the uppercase variants as they refer to objects and not primitives. Using a combination of the two can lead to unexpected errors. In the example below, we see that Number is not assignable to number:


This page is a preview of Beginners Guide to TypeScript

Please select a discussion on the left.