5 replies

Defining TypeScript type or interface for array within object

I am at the beginning of my TypeScript learning curve and am currently struggling as to how to create an interface (or type?) for an array within an object.
This is within a React component.

I have the following object:

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

I have defined the types for the object like this:

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

And am implementing them when I create the useState() for this object:

const [fetchedData, setFetchedData] = useState<dataProps[]>([]);

const [fetchedData, setFetchedData] = useState<dataProps[]>([]);

I am then able to use the strings "word" and "phonetic" without TypeScript yelling at me.
I am also able to loop through the array "meanings" using map() and am able to display "partOfSpeech", again without upsetting TypeScript.

The issue I have is when It try to do map "definitions":

definitions.map((definition) => (

definitions.map((definition) => (

TypeScript kindly informs me that "Property 'map' does not exist on type 'never'" and also that "Parameter 'definition' implicitly has an 'any' type."

I understand the reason for the errors but have so far not been able to work out how to define the type(s) for this array and it's data.
I have tried adding more types to the interface but can't work out the correct syntax and I have a feeling that I may even need to define them separately.

(tagged as React as there is no TypeScript tag)

KP-C

Kevin Powell - Community•3y ago•

5 replies

Chris Bolson

Defining TypeScript type or interface for array within object

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

{
  "word": "clumsy",
  "phonetic": "/ˈklʌmzi/",
  "meanings": [
    {
      "partOfSpeech": "noun",
      "definitions": [
        {
          "definition": "A clumsy person.",
          "synonyms": [],
          "antonyms": []
        }
      ],
      "synonyms": ["butterfingers", "galoot", "klutz"],
      "antonyms": []
    },
}

I have defined the types for the object like this:

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

interface dataProps{
  word: string;
  phonetic: string;
  meanings: [];
}

And am implementing them when I create the useState() for this object:

const [fetchedData, setFetchedData] = useState<dataProps[]>([]);

const [fetchedData, setFetchedData] = useState<dataProps[]>([]);

definitions.map((definition) => (

definitions.map((definition) => (

Defining TypeScript type or interface for array within object

Defining TypeScript type or interface for array within object

Similar Threads

Similar Threads

Similar Threads