Understanding TypeScript Data Types with Examples

Learn TypeScript data types with examples! Understand primitive, complex, and advanced types for writing robust, error-free code.

TypeScript has rapidly become one of the most popular languages for modern web development. As a superset of JavaScript, it offers all the flexibility of JavaScript but with additional features like static typing, which can help catch errors early during development. One of the most fundamental concepts that TypeScript introduces is the system of data types. Understanding these data types is crucial to writing effective and maintainable TypeScript code.

1. What are Data Types in TypeScript?  

Data types in programming define the type of a value. In JavaScript, you might be familiar with dynamic typing, where a variable can hold any type of value. TypeScript, however, uses static typing, where variables are explicitly typed, and the type is determined during compile time. This helps prevent common mistakes, like trying to perform arithmetic on a string or referencing a property that doesn’t exist.

TypeScript’s type system is designed to provide all the flexibility JavaScript offers while giving developers the ability to catch errors earlier and make code more readable and predictable.

2. Basic Data Types in TypeScript  

TypeScript introduces several primitive data types that you can use to define your variables. Let’s look at each of them in detail.

2.1. number Type  

In TypeScript, the number type represents both integer and floating-point values.

Example:  

let age: number = 25;
let price: number = 99.99;

The number type encompasses all numeric values, and there is no need to distinguish between integers and floats as you would in other languages like Python or C++.

2.2. string Type  

The string type in TypeScript is used for text data. It can hold sequences of characters and is one of the most commonly used types in TypeScript.

Example:  

let name: string = 'John Doe';
let city: string = "New York";

TypeScript strings are immutable, which means once a string is created, it cannot be modified directly.

2.3. boolean Type  

The boolean type is used to represent values that are either true or false. It is useful when making conditional checks.

Example:  

let isActive: boolean = true;
let isCompleted: boolean = false;

Boolean values are often used in control flow statements like if and while loops.

2.4. null and undefined Types  

In TypeScript, both null and undefined represent the absence of a value, but they are used in different contexts. null is used to indicate the intentional absence of any object value, whereas undefined typically means a variable has been declared but not assigned a value.

Example:  

let nothing: null = null;
let uninitialized: undefined = undefined;

Note that TypeScript uses undefined and null as distinct types, unlike JavaScript, where both are considered loosely equal.

2.5. any Type  

The any type is a special type in TypeScript that allows you to opt out of type checking. When a variable is typed as any, it can hold any kind of value, making it very flexible but also unsafe.

Example:  

let randomValue: any = 42;
randomValue = "Hello, TypeScript!";
randomValue = true;

While any can be useful, it should be used sparingly, as it removes many of the benefits of TypeScript’s type system.

3. Complex Data Types in TypeScript  

Beyond the basic primitive types, TypeScript also supports more advanced data structures such as arrays, tuples, and objects. Let’s explore these complex types.

3.1. Arrays  

In TypeScript, arrays can hold multiple values of the same type. You can define an array using the Array type or the shorthand [] notation.

Example:  

let numbers: number[] = [1, 2, 3, 4];
let colors: Array<string> = ["red", "green", "blue"];

Here, the type annotation ensures that numbers can only hold numbers and colors can only hold strings.

3.2. Tuples  

Tuples are special types of arrays in TypeScript that allow you to store elements of different types. They are particularly useful when you need to represent a fixed collection of elements where each element has a different type.

Example:  

let user: [string, number] = ["John Doe", 30];

In the above example, the user tuple holds a string (name) and a number (age).

3.3. Objects  

In TypeScript, an object is a collection of key-value pairs. The keys are usually strings (or symbols), and the values can be any data type.

Example:  

let person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

In this case, the object person contains properties name and age, which are of types string and number, respectively.

4. Advanced Data Types in TypeScript  

Now that we’ve covered basic and complex types, let’s dive into more advanced features of TypeScript’s type system.

4.1. enum Type  

An enum is a special “numeric” type that represents a set of named constants. Enums can be numeric (where each item in the enum is assigned an integer) or string-based.

Example:  

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;

In this example, Direction is an enum with values starting from 1. Enums are a powerful way to handle sets of related constants.

4.2. void Type  

The void type is used when a function doesn’t return any value. It is commonly used as the return type for functions that perform actions but don’t return data.

Example:  

function logMessage(message: string): void {
  console.log(message);
}

In this case, the logMessage function does not return anything, so we specify its return type as void.

4.3. never Type  

The never type represents values that never occur. This is used for functions that always throw an error or have infinite loops.

Example:  

function throwError(message: string): never {
  throw new Error(message);
}

The throwError function will never return a value because it throws an exception, so its return type is never.

5. Type Aliases and Interfaces  

Type aliases and interfaces in TypeScript allow you to define custom types. They are similar but have different use cases.

5.1. Type Aliases  

A type alias creates a new name for a type. You can use type aliases to simplify complex types or create reusable custom types.

Example:  

type Point = { x: number; y: number };

let point: Point = { x: 10, y: 20 };

In this example, Point is a type alias that represents an object with x and y properties.

5.2. Interfaces  

An interface is similar to a type alias but is specifically used to define the structure of an object or class. Interfaces are especially useful when working with classes and object-oriented programming.

Example:  

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

let person: Person = {
  name: "Eve",
  age: 30
};

Interfaces are often used in TypeScript to define object shapes and enforce contracts for classes and functions.

6. Type Assertions  

Type assertions allow you to manually tell TypeScript about the type of a variable, overriding the inferred type. This can be useful when you are certain of the type but TypeScript cannot infer it correctly.

6.1. Syntax  

You can use either the as keyword or angle brackets (< >) to assert a type.

Example:  

let someValue: any = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

In this example, we assert that someValue is a string, allowing us to safely access its length property.

7. Conclusion  

Understanding TypeScript data types is essential for writing clean, efficient, and bug-free code. By leveraging the built-in types, including basic types, arrays, objects, and more advanced constructs like enums and type aliases, you can ensure that your code is both robust and maintainable.

By incorporating TypeScript’s static typing features into your projects, you can benefit from earlier error detection, improved code quality, and a better developer experience.