How do I dynamically assign properties to an object in TypeScript?

by

Index types

It is possible to denote obj as any, but that defeats the whole purpose of using typescript. obj = {} implies obj is an Object. Marking it as any makes no sense. To accomplish the desired consistency an interface could be defined as follows.

interface LooseObject {
    [key: string]: any
}

var obj: LooseObject = {};

OR to make it compact:

var obj: {[k: string]: any} = {};

LooseObject can accept fields with any string as key and any type as value.

obj.prop = "value";
obj.prop2 = 88;

The real elegance of this solution is that you can include typesafe fields in the interface.

interface MyType {
    typesafeProp1?: number,
    requiredProp1: string,
    [key: string]: any
}

var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number

obj.prop = "value";
obj.prop2 = 88;

Record<Keys,Type> utility type

Update (August 2020): @transang brought this up in comments

Record<Keys,Type> is a Utility type in typescript. It is a much cleaner alternative for key-value pairs where property-names are not known.
It’s worth noting that Record<Keys,Type> is a named alias to {[k: Keys]: Type} where Keys and Type are generics.
IMO, this makes it worth mentioning here

For comparison,

var obj: {[k: string]: any} = {};

becomes

var obj: Record<string,any> = {}

MyType can now be defined by extending Record type

interface MyType extends Record<string,any> {
    typesafeProp1?: number,
    requiredProp1: string,
}

While this answers the Original question, the answer here by @GreeneCreations might give another perspective on how to approach the problem.

More Related Contents:

  1. Is there a `valueof` similar to `keyof` in TypeScript?
  2. Generic type to get enum keys as union string in typescript?
  3. How do I convert a string to enum in TypeScript?
  4. Angular 2 @ViewChild annotation returns undefined
  5. TypeScript “this” scoping issue when called in jquery callback
  6. Typescript: deep keyof of a nested object
  7. How does interfaces with construct signatures work?
  8. Typescript ReferenceError: exports is not defined
  9. How do I prevent the error “Index signature of object type implicitly has an ‘any’ type” when compiling typescript with noImplicitAny flag enabled?
  10. Does Typescript support the ?. operator? (And, what’s it called?)
  11. error TS2339: Property ‘x’ does not exist on type ‘Y’
  12. Get properties of a class
  13. Select based on enum in Angular2
  14. Jest + Typescript + Absolute paths (baseUrl) gives error: Cannot find module
  15. How to remove index signature using mapped types
  16. typescript template literal as interface key
  17. How to undestand relations between types any, unknown, {} and between them and other types?
  18. TypeScript error TS1005: ‘;’ expected (II)
  19. Difference between extending and intersecting interfaces in TypeScript?
  20. How to do runtime type casting in TypeScript?
  21. How can moment.js be imported with typescript?
  22. Is there an option to make spreading an object strict?
  23. Circular Type References in TypeScript
  24. Accessing properties in union types
  25. How can I remove a wider type from a union type without removing its subtypes in TypeScript?
  26. TypeScript: Why can’t I assign a valid field of an object with type { a: “a”, b: “b” }
  27. TypeScript keyof returning specific type
  28. Generating typescript declaration files from javascript
  29. What is a TypeScript Map file?
  30. Angular2 – root relative imports

Leave a Comment