Introduction
TypeScript, the popular statically-typed superset of JavaScript, offers advanced type manipulation features that enhance development with strong typing. Square brackets [] serve distinct purposes in TypeScript. This post details how square brackets work in TypeScript, from array types to indexed access types and beyond.
1. Defining Array Types
Square brackets in TypeScript define array types with precision.
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["hello", "world"];This syntax specifies that numbers contains numbers, and strings contains strings.
2. Tuple Types
Square brackets define tuples - arrays with fixed lengths and specific types at each index.
type Point = [number, number];
let coordinates: Point = [12.34, 56.78];In this example, Point represents a 2D coordinate as a tuple.
3. The length Property
Every array in TypeScript includes a length property that the type system recognizes.
type LengthArr<T extends Array<any>> = T["length"];
type foo = LengthArr<["1", "2"]>;TypeScript recognizes length as the numeric size of the array.
4. Indexed Access Types
Square brackets access specific index or property types.
type Point = [number, number];
type FirstElement = Point[0];Here, FirstElement represents the first element in the Point tuple: number.
5. Creating Union Types from Tuples
Square brackets help create union types from tuples efficiently.
type Statuses = ["active", "inactive", "pending"];
type CurrentStatus = Statuses[number];Statuses[number] creates a union from all tuple elements.
6. Generic Array Types and Constraints
Square brackets define generic constraints and types.
function logArrayElements<T extends any[]>(elements: T) {
elements.forEach(element => console.log(element));
}This function accepts any array type through the generic constraint T.
7. Mapped Types with Index Signatures
Square brackets in mapped types define index signatures to create dynamic property types.
type StringMap<T> = { [key: string]: T };
let map: StringMap<number> = { a: 1, b: 2 };StringMap creates a type with string keys and values of type T.
8. Advanced Tuple Manipulation
Square brackets enable precise tuple manipulation for extracting or omitting elements.
type WithoutFirst<T extends any[]> = T extends [any, ...infer Rest] ? Rest : [];
type Tail = WithoutFirst<[1, 2, 3]>;WithoutFirst removes the first element from a tuple.
Conclusion
Square brackets in TypeScript provide essential functionality, from basic array definitions to complex type manipulations. These features make TypeScript code reliable and maintainable. The growing adoption of TypeScript demonstrates the practical benefits of its robust type system.
The TypeScript Handbook provides comprehensive documentation of these features. TypeHero offers hands-on practice through interactive challenges to master TypeScript concepts, including square bracket techniques for type manipulation. These resources will strengthen your command of TypeScript and expand your programming capabilities.