Use when types change as code executes. Use when arrays are built incrementally. Use when working with any[] that narrows.
Some variables start with broad types and narrow as TypeScript sees values added.
This is an exception to the rule that types don't change. Variables initialized without a value, or as empty arrays, can have "evolving" types that narrow based on what you assign to them.
null or undefinedany and narrowEvolving types work but are fragile.
Prefer explicit annotations for clarity.
const result = []; // any[]
result.push('a'); // string[]
result.push(1); // (string | number)[]
result
// ^? (string | number)[]
The type evolves with each push.
let val; // any (evolving)
val
// ^? let val: any
if (Math.random() < 0.5) {
val = /hello/;
val
// ^? let val: RegExp
} else {
val = 12;
val
// ^? let val: number
}
val
// ^? let val: number | RegExp
TypeScript tracks assignments and computes the union.
const arr = []; // any[] (evolving)
arr.push(1);
arr
// ^? number[]
arr.push('hello');
arr
// ^? (string | number)[]
let x = null; // any (evolving)
x
// ^? null
x = 12;
x
// ^? number
Once a variable leaves its scope or is used in a function, its type is fixed:
function buildArray() {
const arr = [];
arr.push(1);
arr.push(2);
return arr; // Type fixed as number[]
}
const myArray = buildArray();
myArray.push('hello'); // Error if return type is number[]
const arr = [];
arr.push(1);
// arr is number[] here
// If this line is later:
arr.push('hello');
// arr is (string | number)[] but earlier uses assumed number[]
With noImplicitAny, empty arrays without annotation get any[]:
const values = []; // Implicit any[] - may cause lint warnings
let x = null;
x = 'hello';
x = 42; // Now it's string | number
// Later, someone adds:
x = true; // Now it's string | number | boolean
// All code using x must handle all possibilities
// Clear intent, stable type
const result: number[] = [];
result.push(1);
result.push(2);
// result is always number[]
// Prevents accidents
result.push('hello');
// ~~~~~~~
// Argument of type 'string' is not assignable to 'number'
const squares = [];
for (let i = 0; i < 5; i++) {
squares.push(i * i);
}
// squares: number[] is clear from context
let result = null;
for (const item of items) {
if (condition(item)) {
result = item;
break;
}
}
// result evolves to ItemType | null
Instead of evolving arrays, prefer functional constructs:
// Don't:
const doubled = [];
for (const n of numbers) {
doubled.push(n * 2);
}
// Do:
const doubled = numbers.map(n => n * 2);
// ^? number[]
Type is inferred directly, no evolution needed.
// Evolving (works but fragile)
async function fetchData() {
let data;
try {
const response = await fetch('/api');
data = await response.json();
} catch (e) {
data = null;
}
return data; // any
}
// Better: explicit
async function fetchData(): Promise<Data | null> {
try {
const response = await fetch('/api');
return await response.json();
} catch (e) {
return null;
}
}
Pressure: "TypeScript figures it out automatically"
Response: It's fragile and can change unexpectedly with new code.
Action: Add explicit annotation for stability.
Pressure: "The type depends on runtime conditions"
Response: You know the possible types; declare them.
Action: Use union type: let x: string | number | null = null;
const arr = [] without annotationlet x = null or let x without annotationany[] warnings in lint| Excuse | Reality |
|---|---|
| "TypeScript infers it" | It infers something, not necessarily what you want |
| "I'll add types later" | Later never comes; add them now |
| "It's just temporary" | Temporary code becomes permanent |
// EVOLVING (works but fragile)
const arr = []; // any[]
arr.push(1); // number[]
arr.push('a'); // (string | number)[]
// BETTER (stable and clear)
const arr: number[] = [];
arr.push(1);
arr.push('a'); // Error!
// BEST (functional)
const arr = items.map(item => item.value);
// Type inferred correctly
Evolving types are a convenience, not a best practice.
While TypeScript can track types through assignments, explicit annotations are clearer and more robust. Use evolving types only for simple, localized code. For anything else, declare your intent with annotations.
Based on "Effective TypeScript" by Dan Vanderkam, Item 25: Understand Evolving Types.