dhrn

Dharan Ganesan

Posted on August 31, 2023

Day 37: Types

In this article, we'll take a dive into TypeScript types, exploring the built-in types, advanced type concepts, and examples. Let's get started! 🎉

Basic Types 📚

1. number 🔢

Represents numeric values like integers and floating-point numbers.

let age: number = 25;
Enter fullscreen mode Exit fullscreen mode

2. string 🔡

Denotes textual data, typically enclosed in single or double quotes.

let name: string = "Alice";
Enter fullscreen mode Exit fullscreen mode

3. boolean ✅❌

Represents true or false values.

let isActive: boolean = true;
Enter fullscreen mode Exit fullscreen mode

4. any 🌌

A flexible type that allows dynamic types, similar to plain JavaScript.

let dynamicValue: any = 42;
dynamicValue = "Hello!";
Enter fullscreen mode Exit fullscreen mode

5. void 🌫️

Used for functions that don't return a value.

function logMessage(): void {
    console.log("Logged!");
}
Enter fullscreen mode Exit fullscreen mode

6. null and undefined 🚫

Denote the absence of a value. They are separate types and can be assigned to their respective types.

let maybeNull: null = null;
let maybeUndefined: undefined = undefined;
Enter fullscreen mode Exit fullscreen mode

7. never

Represents values that never occur, often used for functions that throw exceptions or enter infinite loops.

function throwError(message: string): never {
    throw new Error(message);
}
Enter fullscreen mode Exit fullscreen mode

8. Object 🏛️

Represents non-primitive types, i.e., anything that is not a number, string, boolean, null, or undefined.

let person: object = { name: "Bob", age: 30 };
or
let person: Record<string, string> = { name: "Bob" };
or
let person: { name: string }  = { name: "Bob" };
Enter fullscreen mode Exit fullscreen mode

9. symbol 🔑

Creates unique and immutable values, often used as object property keys.

const uniqueKey: symbol = Symbol("unique");
Enter fullscreen mode Exit fullscreen mode

10. Enumerated types (enum) 🌈

A set of named constant values, great for improving code readability.

enum Color {
    Red,
    Green,
    Blue,
}

let chosenColor: Color = Color.Green;
Enter fullscreen mode Exit fullscreen mode

11. Tuple types 📦

Allows defining an array with fixed types and known lengths.

let person: [string, number] = ["Alice", 25];
Enter fullscreen mode Exit fullscreen mode

12. Array types 📚

Denotes arrays of a specific type.

let numbers: number[] = [1, 2, 3, 4, 5];
Enter fullscreen mode Exit fullscreen mode

13. Type aliases ✍️

Create custom names for types, making complex types more readable.

type Point = { x: number; y: number };
let coordinates: Point = { x: 10, y: 20 };
Enter fullscreen mode Exit fullscreen mode

Advanced Type 🌟

Union Types 🌐

Combining multiple types using the | operator.

let value: string | number = "Hello";
value = 42;
Enter fullscreen mode Exit fullscreen mode

Intersection Types ⚓

Combining multiple types into one, resulting in the presence of all properties from each type.

type Nameable = { name: string };
type Ageable = { age: number };
type Person = Nameable & Ageable;

let person: Person = { name: "Alice", age: 30 };
Enter fullscreen mode Exit fullscreen mode

Example 🚀

1. Function Signature ✍️

Define a function signature using a type.

type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

2. Different Type 🗃️

Using type unions to handle different data structures.

type DataStructure = string[] | number[] | object[];

function printLength(data: DataStructure) {
    console.log(data.length);
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
dhrn
Dharan Ganesan

Posted on August 31, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Day 37: Types
day37 Day 37: Types

August 31, 2023