Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Define the object’s shape, then use that type as the array’s element type. For example, User[] declares a mutable array whose elements must match User:
interface User {
id: number;
name: string;
active: boolean;
}
const users: User[] = [
{ id: 1, name: "Ada", active: true },
{ id: 2, name: "Grace", active: false },
];
const activeNames = users
.filter((user) => user.active)
.map((user) => user.name);TypeScript checks that each array element has the declared properties with compatible types. The annotation describes the JavaScript values for the type checker; it does not create, convert, or validate the objects at runtime.
How to write an array-of-objects type
The TypeScript Handbook explains that “In TypeScript, we represent those through object types.” An object type describes the properties an object should have. You can name that shape with an interface or a type alias, or write it inline for a one-off case.
Use a named shape for reusable records
interface User {
id: number;
name: string;
active: boolean;
}
const users: User[] = [];A type alias describes the same shape:
type User = {
id: number;
name: string;
active: boolean;
};
const users: User[] = [];Both forms work for this object shape. Google’s TypeScript Style Guide recommends interfaces for declaring object types, but that is a house-style convention, not a TypeScript language requirement. Choose one form consistently with the conventions of your codebase.
#1 Best Overall
Use an inline shape for a one-off collection
const users: Array<{ id: number; name: string }> = [];Inline object types can be concise when the shape is small and used once. If you need the same shape in multiple declarations or want to refer to it in function signatures, give it a name instead.
Choose between User[] and Array<User>
User[] is shorthand for Array<User>; both express an array whose elements have the User type. The difference is notation, not behavior. Google’s style guide favors T[] or readonly T[] for simple element types and Array<T> for more complex forms. Treat that as a readability convention rather than a universal rule.
| Type | Use it when | What it expresses |
|---|---|---|
User[] |
An ordinary variable or parameter holds records. | A mutable array whose elements have the User shape. |
Array<User> |
The generic form reads more clearly in a nested or complex type. | The same element-type relationship as User[]. |
readonly User[] |
A function reads a collection without changing the array. | Read-only array operations through that reference. |
[string, number] |
Data has fixed positions with different types. | A tuple with known element types at known positions. |
Runtime validator plus User[] |
Values come from an untrusted external source. | Runtime checks as well as a static type for validated data. |
When an array contains more than one object shape
If each element may be either a User or an Admin, use a union as the element type and group it with parentheses:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
type Admin = {
id: number;
permissions: string[];
};
const people: (User | Admin)[] = [];This means each array item can be either shape; it does not mean each item must satisfy both. Parentheses make the intended element union clear.
How to define a type for an object with properties of different types
Declare the different property types in the object shape, then make that shape the array’s element type:
interface Product {
name: string;
price: number;
available: boolean;
}
const products: Product[] = [
{ name: "Notebook", price: 4.5, available: true },
];Do not substitute the lowercase object type for a record definition. TypeScript uses object to mean a non-primitive value; it does not specify properties such as name or price. A named shape gives the checker a useful contract for those properties.
When to use a tuple instead of an array of objects
Use an object array when each item is a record with named properties. Use a tuple when the data is a fixed-position sequence whose positions may have different types:
const labelAndCount: [string, number] = ["users", 12];The tuple describes a string in position zero and a number in position one, with a known length. A regular array type such as (string | number)[] allows an array of either type but does not express that fixed order and length.
How to declare, infer, and use the collection
An explicit annotation such as const users: User[] = [...] makes the intended collection contract visible and lets TypeScript report incompatible elements. When a value is initialized from a well-shaped literal, TypeScript can also infer a useful type. Annotate at API boundaries or where the contract should be explicit; for a clear local value, inference can avoid redundant notation.
Read elements safely
for (const user of users) {
console.log(user.name);
}
const ids = users.map((user) => user.id);Each element is checked against User, so property access such as user.name has type string. An indexed read like users[0] may also be considered possibly undefined, depending on compiler options and settings; an array type does not promise that every index contains an element.
When to use a readonly array
Use readonly User[] or ReadonlyArray<User> when code should be able to read the collection but not mutate the array through its reference:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesfunction printUsers(users: readonly User[]) {
for (const user of users) {
console.log(user.name);
}
// users.push(...) is rejected by the type checker
}A mutable User[] can be passed to a parameter typed readonly User[], but a readonly array cannot be assigned to a mutable User[] reference: that would permit mutation through the mutable type. The restriction is enforced by TypeScript, not by a runtime freeze. Similarly, marking an object property readonly prevents reassignment of that property in type checking; it does not automatically make nested values deeply immutable.
Best Value
How to handle API responses and other untrusted data
A type annotation does not validate JSON, file contents, or user input. This assertion merely tells TypeScript to trust the programmer:
const users = payload as User[];Assertions have no runtime effect: they do not inspect the value or reshape it. For external data, parse or validate the value at runtime before treating it as User[]. A validator should check that the input is an array and that each item has the required properties and compatible values; only after those checks should the application use it under the User[] type.
For the language’s definitions of object types, arrays, readonly arrays, tuples, and assertions, see the TypeScript Handbook: Object Types and TypeScript Handbook: Basic Types. For the documented style conventions discussed above, see the Google TypeScript Style Guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
