You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
However, when we try to add keys to an empty prototype object in TypeScript, we'll get errors:
463
+
However, when we try to add keys dynamically to an object in TypeScript, we'll get errors:
466
464
467
465
```typescript
468
466
// TypeScript Example
@@ -473,32 +471,58 @@ albumAwards.MercuryPrize = false; // red squiggly line under MercuryPrize
473
471
albumAwards.Billboard=true; // red squiggly line under Billboard
474
472
475
473
// hovering over Grammy shows:
476
-
Property'Grammy'doesnotexistontype'{}'.
474
+
//Property 'Grammy' does not exist on type '{}'.
477
475
```
478
476
479
-
TypeScript is protecting us from adding keys to an object that doesn't have them defined.
477
+
This can feel unhelpful. You might think that TypeScript, based on its ability to narrow our code, should be able to figure out that we're adding keys to an object.
478
+
479
+
In this case, TypeScript prefers to be conservative. It's not going to let you add keys to an object that it doesn't know about. This is because TypeScript is trying to prevent you from making a mistake.
480
480
481
481
We need to tell TypeScript that we want to be able to dynamically add keys. Let's look at some ways to do this.
482
482
483
483
### Index Signatures for Dynamic Keys
484
484
485
-
Index signatures are one way to specify we want to be able to add any key and value to an object. The syntax uses square brackets, just like we would if we were adding a dynamic key to an object literal.
485
+
Let's take another look at the code above.
486
486
487
-
Here's how we would specify an inline index signature for the `albumAwards` object literal. We'll call the key `award` as a string, and specify it should have a boolean value to match the example above:
487
+
```typescript
488
+
const albumAwards = {};
489
+
490
+
albumAwards.Grammy=true; // red squiggly line under Grammy
491
+
```
492
+
493
+
The technical term for what we're doing here is 'indexing'. We're indexing into `albumAwards` with a string key, `Grammy`, and assigning it a value.
494
+
495
+
To support this behavior, we want to tell TypeScript that whenever we try to index into `albumAwards` with a string, we should expect a boolean value.
496
+
497
+
To do that, we can use an 'index signature'.
498
+
499
+
Here's how we would specify an index signature for the `albumAwards` object.
488
500
489
501
```typescript
490
502
const albumAwards: {
491
-
[award:string]:boolean;
503
+
[index:string]:boolean;
492
504
} = {};
505
+
506
+
albumAwards.Grammy=true;
507
+
albumAwards.MercuryPrize=false;
508
+
albumAwards.Billboard=true;
493
509
```
494
510
495
-
Note that with the inline index signature above, the values must always be a boolean. The `award` keys we add can't use a string or any other type.
511
+
The `[index: string]: boolean` syntax is an index signature. It tells TypeScript that `albumAwards` can have any string key, and the value will always be a boolean.
512
+
513
+
We can choose any name for the `index`. It's just a description.
514
+
515
+
```typescript
516
+
const albumAwards: {
517
+
[iCanBeAnything:string]:boolean;
518
+
} = {};
519
+
```
496
520
497
521
The same syntax can also be used with types and interfaces:
0 commit comments