An array type describes the kind of values a list can contain. If a variable is typed as string[], TypeScript allows string operations on each item and prevents numbers, booleans, or unrelated objects from being added by mistake.
TypeScript supports two common array syntaxes: Type[] and Array<Type>. They mean the same thing for normal arrays. Most projects use Type[] for simple arrays because it is shorter and easy to read.
Add one worked example that compares the normal path with the boundary case for TypeScript Arrays and Tuples: Typed Lists and Fixed Shapes.
Keep the note tied to a real TypeScript workflow so the idea is easier to recall later.
TypeScript Arrays and Tuples Typed Lists and Fixed Shapes should be studied as a practical TypeScript lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
| Syntax | Meaning | Example |
|---|---|---|
| string[] | Array of strings | ["html", "css"] |
| number[] | Array of numbers | [10, 20, 30] |
| Array<User> | Array of user objects | [{ id: 1, name: "Asha" }] |
const topics: string[] = ["types", "functions", "generics"];
const scores: Array<number> = [76, 88, 95];
topics.push("modules");
scores.push(100);
// topics.push(42);
// Error: number is not assignable to string.
const upperTopics = topics.map(topic => topic.toUpperCase());
console.log(upperTopics);Real applications usually store arrays of objects: users, products, posts, comments, invoices, lessons, and so on. Create a type or interface for the object shape, then use an array of that type.
This makes list operations safer. When you filter, map, reduce, or render the array, TypeScript knows exactly which properties exist on each item.
type Tutorial = {
id: number;
title: string;
category: "frontend" | "backend";
published: boolean;
};
const tutorials: Tutorial[] = [
{ id: 1, title: "TypeScript Basics", category: "frontend", published: true },
{ id: 2, title: "Golang Modules", category: "backend", published: false },
];
const publishedTitles = tutorials
.filter(tutorial => tutorial.published)
.map(tutorial => tutorial.title);
console.log(publishedTitles); // ["TypeScript Basics"]A readonly array tells TypeScript that a function should not mutate the list it receives. This is useful for helper functions that only read data, because it prevents accidental calls to mutating methods like push(), pop(), splice(), or direct index assignment.
Readonly arrays do not make the original runtime array frozen. They are a compile-time promise that this particular reference will be used in a read-only way.
function printTopics(topics: readonly string[]): void {
topics.forEach((topic, index) => {
console.log(`${index + 1}. ${topic}`);
});
// topics.push("new topic");
// Error: push does not exist on readonly string[].
}
const courseTopics = ["setup", "types", "objects"];
printTopics(courseTopics);A tuple is an array with a fixed structure. Each position has a known type, and the order matters. Tuples are useful when a short positional result is clearer than creating a full object.
Named tuple elements make tuple code easier to understand because the type itself documents the meaning of each position. However, if the data has many fields or will be passed around widely, an object is usually easier to maintain.
| Use a Tuple When | Use an Object When |
|---|---|
| The result has two or three well-known positions. | The result has several fields. |
| The order is obvious, such as [x, y]. | Property names make the code clearer. |
| The value is used locally and briefly. | The value travels across modules or API layers. |
type ApiResult = [statusCode: number, message: string];
function saveProfile(name: string): ApiResult {
if (name.trim() === "") {
return [400, "Name is required"];
}
return [200, "Profile saved"];
}
const [statusCode, message] = saveProfile("Neha");
console.log(statusCode, message);Arrays can also contain union types. This is helpful when a list accepts a limited set of values, such as roles, statuses, directions, or filter options.
Combining arrays with literal types lets you model real options without allowing random strings. The compiler then catches typos before they reach the browser or server.
type UserRole = "admin" | "editor" | "viewer";
const allowedRoles: UserRole[] = ["admin", "editor", "viewer"];
function canManageContent(role: UserRole): boolean {
return role === "admin" || role === "editor";
}
const editableRoles = allowedRoles.filter(canManageContent);
console.log(editableRoles); // ["admin", "editor"]
// allowedRoles.push("owner");
// Error: "owner" is not part of UserRole.TypeScript Arrays and Tuples Typed Lists and Fixed Shapes matters in TypeScript because it changes how a program is written, tested, or debugged. The page should explain the normal flow first: what the developer writes, what the runtime or platform does, and what result should appear.
When teaching TypeScript Arrays and Tuples Typed Lists and Fixed Shapes, avoid stopping at syntax. Show the surrounding decision: why this feature is chosen, what problem it removes, and what would become harder if the feature were not used.
The strongest notes for TypeScript Arrays and Tuples Typed Lists and Fixed Shapes explain where the idea stops working. Add cases for missing input, wrong order, incompatible types, duplicate values, empty collections, failed requests, or configuration mismatch when those cases fit the lesson.
Readers should leave the page knowing how to inspect a bad result. For TypeScript Arrays and Tuples Typed Lists and Fixed Shapes, that means checking the relevant value, state, dependency, selector, query, route, class, or runtime message before changing code randomly.
1. Define the input for TypeScript Arrays and Tuples Typed Lists and Fixed Shapes.
2. Apply the rule from the lesson.
3. Compare the actual result with the expected result.
4. Record the fix if the result differs.1. Try empty, missing, duplicate, or invalid data.
2. Identify where TypeScript Arrays and Tuples Typed Lists and Fixed Shapes changes behavior.
3. Explain the safest correction.
4. Retest the normal path.Memorizing TypeScript Arrays and Tuples Typed Lists and Fixed Shapes without the situation where it is useful.
Connect TypeScript Arrays and Tuples Typed Lists and Fixed Shapes to a concrete TypeScript task.
Testing TypeScript Arrays and Tuples Typed Lists and Fixed Shapes only with the perfect input.
Include empty, missing, duplicate, incompatible, or failed cases when relevant.
Changing code before reading the visible symptom or error message.
Inspect the output, state, configuration, or stack trace connected to TypeScript Arrays and Tuples Typed Lists and Fixed Shapes.
Memorizing TypeScript Arrays and Tuples Typed Lists and Fixed Shapes without the situation where it is useful.
Connect TypeScript Arrays and Tuples Typed Lists and Fixed Shapes to a concrete TypeScript task.
The common mistake is memorizing syntax without understanding when the behavior changes or fails.
Remember the problem it solves in TypeScript, then attach the syntax or steps to that problem.
You can predict the result of a small example, explain a failure case, and choose it over a nearby alternative for a clear reason.
They often copy the syntax but skip the state, input, dependency, selector, route, type, or configuration that controls the behavior.
Explore 500+ free tutorials across 20+ languages and frameworks.