Exploring the Power of Square Brackets in TypeScript
Tags: beginners, typescript
Published: 2023-12-19 17:19:41

## Introduction

TypeScript, the popular statically-typed superset of JavaScript, offers an array of advanced type manipulation features, enhancing the development experience with strong typing. One of the intriguing aspects of TypeScript is its use of square brackets `[]` in various contexts. This post will explore the different ways square brackets are used in TypeScript, from array types to indexed access types and beyond.

## 1. Defining Array Types

At the most basic level, square brackets in TypeScript are used to define array types.

```typescript
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ['hello', 'world'];
```

This syntax specifies that `numbers` is an array of numbers, and `strings` is an array of strings.

## 2. Tuple Types

TypeScript also uses square brackets to define tuples - arrays with fixed lengths and known types at specific indices.

```typescript
type Point = [number, number];
let coordinates: Point = [12.34, 56.78];
```

In this example, `Point` is a tuple type representing a 2D coordinate.

## 3. The `length` Property

Every array in TypeScript has a `length` property, inferred by the type system.

```typescript
type LengthArr<T extends Array<any>> = T['length']

type foo = LengthArr<['1', '2']> // foo will be 2

```

TypeScript understands that `length` is a number, reflecting the array's size.

## 4. Indexed Access Types

TypeScript allows accessing the type of a specific index or property using square brackets.

```typescript
type Point = [number, number];
type FirstElement = Point[0]; // number
```

Here, `FirstElement` is the type of the first element in the `Point` tuple, which is `number`.

## 5. Creating Union Types from Tuples

The `[]` syntax is instrumental in creating union types from tuples.

```typescript
type Statuses = ['active', 'inactive', 'pending'];
type CurrentStatus = Statuses[number]; // 'active' | 'inactive' | 'pending'
```

Using `Statuses[number]`, we create a union type of all tuple elements.

## 6. Generic Array Types and Constraints

Square brackets are also used to define generic constraints and types.

```typescript
function logArrayElements<T extends any[]>(elements: T) {
  elements.forEach(element => console.log(element));
}
```

In this function, `T` is constrained to be an array type.

## 7. Mapped Types with Index Signatures

TypeScript's mapped types can use square brackets to define index signatures, creating dynamic property types.

```typescript
type StringMap<T> = { [key: string]: T };
let map: StringMap<number> = { a: 1, b: 2 };
```

`StringMap` is a type with string keys and `T` typed values.

## 8. Advanced Tuple Manipulation

The square brackets enable advanced tuple manipulation like extracting or omitting elements.

```typescript
type WithoutFirst<T extends any[]> = T extends [any, ...infer Rest] ? Rest : [];
type Tail = WithoutFirst<[1, 2, 3]>; // [2, 3]
```

Here, `WithoutFirst` removes the first element from a tuple.

### Conclusion

The versatility of square brackets in TypeScript, ranging from defining array and tuple types to advanced type manipulations, showcases TypeScript's power and flexibility. These features significantly contribute to TypeScript's ability to enforce strong typing, making code more reliable and maintainable. As TypeScript continues to evolve, its sophisticated type system remains a key reason for its growing popularity among developers.

For those interested in diving deeper and honing their TypeScript skills, the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) is an excellent resource for exploring these and other features in more detail. Additionally, online platforms like [TypeHero](https://typehero.dev/) provide interactive learning experiences and challenges that can help solidify your understanding of TypeScript and its various techniques, including the use of square brackets for advanced type manipulations. Utilising these resources can greatly enhance your TypeScript proficiency and open up new possibilities in your programming endeavours.