TypeScript: Cannot understand this error: Type: Foo is missing the following properties from type Bar add, addAll, delete, keys, and 3 more

This is a name collision. There’s already an interface named Cache in the global context to support the Cache Web API. Due to declaration merging, if you declare your own interface Cache {} in global scope, you are just adding properties/methods to it. This is not what you want to do.

You should either rename Cache to something like MyCache,

interface MyCache {
  a: {
    b: {
      c: string[];
      d: string;
    };
  };
}

const myCache: MyCache = {
  a: {
    b: { c: ["stuff1", "stuff2", "stuff3", "stuff4"], d: "irrelevant" }
  }
};

or you should declare it inside a different scope, like a namespace

namespace MyNamespace {
  interface Cache {
    a: {
      b: {
        c: string[];
        d: string;
      };
    };
  }

  const cache: Cache = {
    a: {
      b: { c: ["stuff1", "stuff2", "stuff3", "stuff4"], d: "irrelevant" }
    }
  };
}

or a module (which can be signified by exporting something in your ts file):

export interface Cache {
  a: {
    b: {
      c: string[];
      d: string;
    };
  };
}

Playground link to code

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top