React with typescript - Type {} missing the following properties from type

Viewed 455

I'm trying to learn React with TypeScript, and I seem to keep running into TS errors that are a bit vague.

Here is the type definition,

export interface ABC {
  config: {
    lang: Array<string>,
    min_search_length: number,
  },
  docs: [{
    location?: string,
    text?: string,
    title?: string,
  }]
}

When I use it to test for some purpose in a function,

export async function getResult(): Promise<ABC>{
let response;
    response =
    {
      config: {
        lang: [
          'en',
        ],
        min_search_length: 3,
        prebuild_index: false,
        separator: '[\\s\\-]+',
      },
      docs: [
        {
          location: '#kjaksjh',
          text: 'random text',
          title: 'random text',
        },
        {
          location: '#cJbcmj',
          text: 'random text ',
          title: 'random text',
        },
      ],
    };
    return response.docs;
}

I am facing this error,

Type '{ location: string; text: string; title: string; }[]' is missing the following properties from type 'ABC': config, docs.

What could I be missing?

1 Answers

You're returning the equivalent of Promise<ABC["docs"]> but you've annotated the function with the return type Promise<ABC>. Either update the return type or use return response; instead of return response.docs;.

Edit: Additionally, you example code has many typos and formatting issues which make it hard to debug and could cause further compilation errors, and you've written ABC in such a way that it ABC["docs"] is actually a tuple of a single element, when you probably meant to make it an array of elements. Put the dims after the object, not around it ([{...}] -> {...}[]).

Related