Array Type in TypeScript

  • An array is a collection of values of the same type. You can define an array in TypeScript using the following two syntaxes:
  • Using square brackets ([]): This is the most common way to declare an array type in TypeScript.

    // Example:
    let numbers: number[] = [1, 2, 3, 4, 5];
    let names: string[] = ["Alice", "Bob", "Charlie"];

  • Here, numbers is an array of numbers, and names is an array of strings. You can only store values of the specified type in each array.
  • Using the generic Array<T> syntax: This is an alternative way to define an array, where T is the type of elements in the array.

    // Example:
    let numbers: Array<number> = [1, 2, 3, 4, 5];
    let names: Array<string> = ["Alice", "Bob", "Charlie"];

  • Both syntaxes are functionally the same, and you can choose whichever you prefer based on readability.
Working with Arrays
  • Once you've defined an array, you can use it like any regular JavaScript array. However, TypeScript provides type safety, ensuring that only the specified type of values can be pushed into the array.

    // Example:
    let scores: number[] = [10, 20, 30];
    scores.push(40);  // Valid: adding a number
    scores.push("50");  // Error: 'string' is not assignable to type 'number'

  • Mixed-Type Arrays: If you want to create an array that holds values of different types, you can use a union type.

    // Example:
    let mixed: (number | string)[] = [1, "two", 3, "four"];

  • In this case, the array can hold both numbers and strings.
  • Here are a few more examples:

    // Array of numbers
    let numbers: number[] = [1, 2, 3, 4, 5];
    let moreNumbers: Array<number> = [6, 7, 8, 9, 10];

    // Array of strings
    let strings: string[] = ["apple", "banana", "cherry"];
    let moreStrings: Array<string> = ["date", "elderberry", "fig"];

    // Array of booleans
    let booleans: boolean[] = [true, false, true];
    let moreBooleans: Array<boolean> = [false, true, false];

    // Array of any
    let anyValue: any[] = [1, "2", true, [3, "2"], { name: "john" }]
    let moreAnyValue: Array<any> = [1, "2", true, [3, "2"], { name: "john" }]

  • You can also use type assertions to specify the type of an array without initializing it:

    let emptyArray: number[] = [];
    emptyArray.push(1);
    emptyArray.push(2);
    emptyArray.push(3);

    // Type assertion
    let stringArray: string[] = [] as string[];
    stringArray.push("hello");
    stringArray.push("world");

    console.log(emptyArray);
    console.log(stringArray);


[ 1, 2, 3 ]
[ 'hello', 'world' ]
  • TypeScript also supports readonly arrays, which are arrays whose elements cannot be modified once they are assigned:

    let readonlyArray: readonly number[] = [1, 2, 3];

    // Error: Index signature in type 'readonly number[]' only permits reading
    readonlyArray[0] = 4;

    // Error: Property 'push' does not exist on type 'readonly number[]'
    readonlyArray.push(4);

  • In addition to these basic array types, TypeScript provides various utility types and methods to work with arrays, such as Partial<T>, ReadonlyArray<T>, map(), filter(), etc. These utilities can be helpful when working with arrays in TypeScript.

No comments:

Post a Comment

Primitive Types in TypeScript

In TypeScript, primitive types are the most basic data types, and they are the building blocks for handling data. They correspond to simple ...