Typescript error when introducing Abstract class or properties?

Question

I have a DOCUMENTATION_CATALOG that's defined like this:

export const DOCUMENTATION_CATALOG: {[key:string]:TopicCategory[]} = {}

We can get the TopicCategory array like this;

const values:TopicCategory[] =
     Object.keys(DOCUMENTATION_CATALOG).map(
     key => DOCUMENTATION_CATALOG[key])

When I extend TopicCategory with AbstractTopic I get the following error for the values variable:

const values: TopicCategory[] Type 'TopicCategory[][]' is not assignable to type 'TopicCategory[]'. Type 'TopicCategory[]' has no properties in common with type 'TopicCategory'.

This is the Stackblitz

I isolated it a little bit further. The error is not triggered if there are no properties inside TopicCategory .

Answer 1

Your DOCUMENTATION_CATALOG is a map from string to TopicCategory[] .

Your values is of type TopicCategory[] , but the callback passed into map() returns one of the values in DOCUMENTATION_CATALOG , which is to say, a TopicCategory[] . Hence, the result of the map() call is an array of TopicCategory[] , which is TopicCategory[][] .

I can't give any suggestions, as I'm not sure what the intended use of value is, or if the DOCUMENTATION_CATALOG has the wrong type.

There are two different solutions:

Either value needs to be of type TopicCategory[][] ,

or DOCUMENTATION_CATALOG needs to be {[key:string]:TopicCategory} .