Can’t narrow the type of an object property even after checking it with a type guard

by

The problem is that the compiler doesn’t know how to do narrowing on an object property like IceCreams[item] where you are indexing with a key whose type isn’t known to be a specific literal type. TypeScript is only following the type of the index, not the identity. And the type of item is string. If you have item1 and item2, both of type string, then checking IceCreams[item1] wouldn’t let you conclude anything about IceCreams[item2], right? And since TypeScript can’t tell the difference between item1 vs item2 or item vs item, it can’t narrow. This is a known limitation of TypeScript reported at microsoft/TypeScript#10530. Maybe someday it will be addressed. But for now, there’s an easy workaround:

Just copy the value into a new variable, so that the problematic indexing occurs only once:

iceCreamKeys.forEach(item => {
    const x = IceCreams[item];
    if (x.natural) {
        console.log(x.naturalComponent)  // okay
    }
})

Playground link to code

More Related Contents:

  1. Typescript Discriminated Union allows invalid state
  2. Narrowing a return type from a generic, discriminated union in TypeScript
  3. Why can I avoid excess property check in typescript just by passing a reference to an object to a function rather than the object in its literal form?
  4. TypeScript: Accept all Object keys that map to a specific type
  5. Typescript interface default values
  6. How to configure custom global interfaces (.d.ts files) for TypeScript?
  7. How to selectively assign from one Partial to another in typescript
  8. Experimental decorators warning in TypeScript compilation
  9. A TypeScript GUID class? [closed]
  10. Checking validity of string literal union type at runtime?
  11. Why is never assignable to every type?
  12. Is there an alternative to Partial to accept only fields from another type and nothing else?
  13. TypeScript empty object for a typed variable
  14. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  15. How to declare a function that throws an error in Typescript
  16. How to use enum as index key type in typescript?
  17. How to share code between TypeScript projects?
  18. How to make Typescript infer the keys of an object but define type of its value?
  19. Is there ArgumentsType like ReturnType in Typescript?
  20. Typescript: Remove entries from tuple type
  21. Typescript: change function type so that it returns new value
  22. What does a TypeScript index signature actually mean?
  23. Check if object correctly implements interface
  24. Is it possible to narrow the types of overloaded parameters without exhaustively checking each parameter in the function body?
  25. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  26. What exactly $event object do in Angular 2?
  27. new Typescript “satisfies” operator
  28. What are the differences between the private keyword and private fields in TypeScript?
  29. TypeScript: deep partial?
  30. Is it possible to export * as foo in typescript

Leave a Comment