Preserve Type when using Object.entries

by

This is related to questions like Why doesn’t Object.keys() return a keyof type in TypeScript?. The answer to both is that object types in TypeScript are not exact; values of object types are allowed to extra properties not known about by the compiler. This allows interface and class inheritance, which is very useful. But it can lead to confusion.

For example, if I have a value nameHaver of type {name: string}, I know it has a name property, but I don’t know that it only has a name property. So I can’t say that Object.entries(nameHaver) will be Array<["name", string]>:

interface NameHaver { name: string }
declare const nameHaver: NameHaver;
const entries: Array<["name", string]> = Object.entries(nameHaver); // error here: why?
entries.map(([k, v]) => v.toUpperCase());

What if nameHaver has more than just a name property, as in:

interface NameHaver { name: string }
class Person implements NameHaver { constructor(public name: string, public age: number) { } }
const nameHaver: NameHaver = new Person("Alice", 35);
const entries: Array<["name", string]> = Object.entries(nameHaver); // error here: ohhh
entries.map(([k, v]) => v.toUpperCase());  // explodes at runtime!

Oops. We assumed that nameHaver‘s values were always string, but one is a number, which will not be happy with toUpperCase(). The only safe thing to assume that Object.entries() produces is Array<[string, unknown]> (although the standard library uses Array<[string, any]> instead).

So what can we do? Well, if you happen to know and are absolutely sure that a value has only the keys known about by the compiler, then you can write your own typing for Object.entries() and use that instead… and you need to be very careful with it. Here’s one possible typing:

type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T];
function ObjectEntries<T extends object>(t: T): Entries<T>[] {
  return Object.entries(t) as any;
}

The as any is a type assertion that suppresses the normal complaint about Object.entries(). The type Entries<T> is a mapped type that we immediately look up to produce a union of the known entries:

const entries = ObjectEntries(nameHaver);
// const entries: ["name", string][]

That is the same type I manually wrote before for entries. If you use ObjectEntries instead of Object.entries in your code, it should “fix” your issue. But do keep in mind you are relying on the fact that the object whose entries you are iterating has no unknown extra properties. If it ever becomes the case that someone adds an extra property of a non-number[] type to unpassable_tiles, you might have a problem at runtime.

Playground link to code

More Related Contents:

  1. Can’t perform a React state update on an unmounted component
  2. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  3. When to use JSX.Element vs ReactNode vs ReactElement?
  4. Typescript: React event types
  5. How can I disable all typescript type checking?
  6. Should we use useCallback in every function handler in React Functional Components
  7. TypeScript React.FC confusion
  8. Type ‘void’ is not assignable to type ‘((event: MouseEvent) => void) | undefined’
  9. “You may need an additional loader to handle the result of these loaders.”
  10. How to disable the selection of an item when the first letter of the option is pressed in the Select component?
  11. useMemo vs. useEffect + useState
  12. Browser Detection in ReactJS
  13. how can I use top level “await” in typescript next.js
  14. import * as React from ‘react’; vs import React from ‘react’;
  15. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  16. How to prevent Next.js from instantiating a singleton class/object multiple times?
  17. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  18. Using styled-components with props and TypeScript
  19. Use async await with Array.map
  20. How to avoid bind or inline arrow functions inside render method
  21. Make React useEffect hook not run on initial render
  22. Rendering raw html with reactjs
  23. Correct way to handle conditional styling in React
  24. Is it possible to share states between components using the useState() hook in React?
  25. Multiple path names for a same component in React Router
  26. setInterval in a React app
  27. How to use create-react-app with an older React version?
  28. Navigate to screen after opening a notification?
  29. How do I add validation to the form in my React component?
  30. At what nesting level should components read entities from Stores in Flux?

Leave a Comment