Index Signature
interface Cat {
name: string;
age: string;
}
type props = Record<string, string | undefined>;
function bb({ name, age }: props) {
console.log("name is " + name + ", age is " + age);
}
const cat1: Cat = { name: "Fluffball", age: "6" };
const cat2 = { name: "Fluffball", age: "6" };
bb(cat1); // ❌ error
bb(cat2); // ✅ works
And Cat does NOT have an index signature.
Different contract, at type level. No guarantee random key a string. Even when undefined in Record.
Index signature - TS thing, not in JS. Nothing to do with iterators.
type Dictionary = {
[key: string]: string;
};
this is the index signature
This means:
cat.name → allowed
cat.age → allowed
cat["random"] → ❌ error in TypeScript
Index signature is about:
Bracket property access (obj[someKey])
Without Index Signature (Structured Object)
type Translations = Record<string, string>;
// is syntactic sugar for
type Translations = {
[key: string]: string;
};
Very Important Distinction
Structured object:
{
name: string;
age: string;
}
Dictionary object:
{
[key: string]: string;
}
They are fundamentally different in TypeScript.
Structured object:
{ name: string; age: string }
Means:
Only these keys are legal.
Dictionary:
{ [key: string]: string }
Means:
Any key is legal.
Object typed with index signature is lying. The value is not always string, could be undefined. if you access
const val = dict[key];
if (val !== undefined) val.toUpperCase();
check of if not undefined
structured vs dynamic. Structured object.
index signature objects are for dynamic, dictionary-like objects