How to Define a Generic Type for an Array in TypeScript ?
Generics in TypeScript are a way to write reusable code that can work with different types of data. When it comes to defining generic types for arrays. TypeScript provides flexible options to ensure type safety while allowing for flexibility in the types of elements stored in the array.
Table of Content
1. Using the Type Alias
The type alias can be used to define the generic type of the array and it can be used to type the array explicitly with the specified generic type.
Syntax:
type ArrayType<T> = T[ ];
Example: The below code uses a typed alias to define a generic type for an array in TypeScript.
type ArrayType<T> = T[];
const numbers: ArrayType<number> = [1, 2, 3, 4];
const strings: ArrayType<string> = ['Geeks', 'For','Geeks'];
const mixedArr: ArrayType<number | string | boolean> =
['GeeksforGeeks', 1, 2, true, "TypeScript", false];
console.log("Numbers array: ",numbers);
console.log("Strings array: ",strings);
console.log("Mixed array: ",mixedArr);
Output:
Numbers array: [1, 2, 3, 4]
Strings array: ["Geeks", "For", "Geeks"]
Mixed array: ["GeeksforGeeks", 1, 2, true, "TypeScript", false]
2. Using Array Generic Type
TypeScript also provides a built-in generic type for arrays called Array<T>. You can use it directly to define arrays with a specific element type.
Syntax:
const arrayName: Array<Type>=[element1, element2, ...]
Example: The below code uses Array Generic type to define generic type for an array.
const numbers: Array<number> = [1, 2, 3, 4];
const strings: Array<string> = ['Geeks', 'For','Geeks'];
const mixedArr: Array<number | string | boolean> =
['GeeksforGeeks', 1, 2, true, "TypeScript", false];
console.log("Numbers array: ",numbers);
console.log("Strings array: ",strings);
console.log("Mixed array: ",mixedArr);
Output:
Numbers array: [1, 2, 3, 4]
Strings array: ["Geeks", "For", "Geeks"]
Mixed array: ["GeeksforGeeks", 1, 2, true, "TypeScript", false]
3. Using Tuple Types
Tuple types in TypeScript allow you to express an array with a fixed number of elements, where each element may be of a different type. By using tuple types, you can enforce a specific order and type for each element in the array.
Syntax:
type TupleType<T extends any[]> = T;
Example: In this example, we define a generic type TupleType for arrays with a fixed length and specific types for each element.
type TupleType<T extends any[]> = T;
const numbers: TupleType<number[]> = [1, 2, 3, 4];
const strings: TupleType<string[]> = ['Geeks', 'For', 'Geeks'];
const mixedArr: TupleType<(number | string | boolean)[]> =
['GeeksforGeeks', 1, 2, true, "TypeScript", false];
console.log("Numbers array: ", numbers);
console.log("Strings array: ", strings);
console.log("Mixed array: ", mixedArr);
Output:
"Numbers array: ", [1, 2, 3, 4]
"Strings array: ", ["Geeks", "For", "Geeks"]
"Mixed array: ", ["GeeksforGeeks", 1, 2, true, "TypeScript", false]
4. Using Interfaces
Interfaces in TypeScript can also be used to define a generic type for arrays. This allows you to create more complex and structured types that can be reused throughout your code.
Syntax:
interface ArrayType<T> {
items: T[];
}
Example: The following example uses an interface to define a generic type for an array in TypeScript.
interface ArrayType<T> {
items: T[];
}
const numberArray: ArrayType<number> = { items: [1, 2, 3, 4] };
const stringArray: ArrayType<string> = { items: ['Geeks', 'For', 'Geeks'] };
const mixedArray: ArrayType<number | string | boolean> = {
items: ['GeeksforGeeks', 1, 2, true, "Nikunj", false]
};
console.log("Numbers array: ", numberArray.items);
console.log("Strings array: ", stringArray.items);
console.log("Mixed array: ", mixedArray.items);
Output
Numbers array: [ 1, 2, 3, 4 ] Strings array: [ 'Geeks', 'For', 'Geeks' ] Mixed array: [ 'GeeksforGeeks', 1, 2, true, 'Nikunj', false ]