Introduction
Consider the following example:
This seemingly harmless piece of code throws a TypeScript error on dynamically assigning name to the organization object.
An error is thrown when dynamically assigning a property to an object
The source of confusion, which is perhaps rightly justified if you’re a TypeScript beginner, is: how could something that seems so simple be such a problem in TypeScript?
The TL;DR of it all is that, if you cannot define the variable type at declaration time, you can use the Record utility type or an object index signature to solve this. But in this post, we’ll go through the problem itself and work toward a solution that should work in most cases.
Understanding the problem with dynamically assigning properties to objects
Generally speaking, TypeScript determines the type of a variable when it is declared, and this determined type doesn’t change, i.e., it stays the same all through your application.
There are exceptions to this rule, such as when considering type narrowing or working with any type, but this is a general rule to remember otherwise.
In the earlier example, the organization object is declared as follows:
Exploring the literal object type
When you then try to reference the name prop on this empty object literal:
TypeScript yells.
Property ‘name’ does not exist on type ‘ {}‘
When you understand the issue, the error does seem appropriate.
Let’s fix this.
Resolving the problem
There are numerous ways you can resolve the TypeScript error here. Let’s consider these:
Solution 1: Explicitly type the object at declaration time
This is the easiest solution to reason through. At the time you declare the object, go ahead and type it. Furthermore, assign it all the relevant values.
This eliminates any surprises. You’re clearly stating what this object type is and rightly declaring all relevant properties when you create the object.
However, this is not always feasible if the object properties must be added dynamically, which is why we’re all here.
Solution 2: Use an object index signature
Occasionally, the properties of the object truly need to be added at a time after they’ve been declared. In this case, you can use the object index signature, as follows:
At the time the organization variable is declared, you can go ahead and explicitly type it to the following {[key: string]: string}.
To explain the syntax further, you might be used to object types having fixed property types:
However, you can also substitute name for a “variable type”.
For example, if you want to define any string property on obj:
Note that the syntax is similar to how you’d use a variable object property in standard JavaScript:
The TypeScript equivalent is called an object index signature. Moreover, note that you could type key with other primitives:
Solution 3: Use the Record utility type
The Record utility type allows you to constrict an object type whose properties are Keys and property values are Type. It has the following signature: Record<Keys, Type>.
In our example, Keys represent string and Type, string as well. The solution here is quite concise as shown below:
Instead of using a type alias, you can also inline the type:
Using the Record utility type
Conclusion
Apart from primitives, the most common types you’ll have to deal with are likely object types.
In cases where you need to build an object dynamically, take advantage of the Record utility type or use the object index signature to define the allowed properties on the object.
