react.js typescript problem with JSON Array

Question

I'm trying to get myself familiarized with react.js with typescript. I tried to declare a Array of JSON, but it gives me error saying ... is not assignable to JSON

Here is my code:

import React from 'react'; type MyProps = { message?: string; }; type MyState = { chat_list : Array<JSON> count: number; // like this }; class ChatList extends React.Component<MyProps, MyState> { state: MyState = { count: 0, chat_list : [ { "name":"true", "active" : true } ] }; ...

How can I resolve this?

nanobar · Accepted Answer · 2020-03-21 09:50:20Z

3

You should define the shape of a chat item, JSON is an actual global object with a specific shape (JSON.stringify, JSON.parse etc)

 interface ChatItem { name: string; active: boolean; } interface MyState { chat_list: Array<ChatItem>; // Or ChatItem[] count: number; } state: MyState = { count: 0, chat_list: [ { name: 'true', active: true, }, ], };

answered Mar 21, 2020 at 9:50

nanobar

66.8k26 gold badges156 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Danial Over a year ago

thanks it worked, out of curiosity just asking, instead of declaring an interface can I use a per-declared class ?? cause I already have one class alternative to ChatItem as ChatListItem

nanobar Over a year ago

Not sure what you mean by per declared class? As in define something just for the class? The interface or type can be scoped to inside a function or file if that's what you mean

Danial Over a year ago

i tried to mean pre-declared class, I want access it from all of my classes ..

Danial Over a year ago

just decalare in an another file, or better way, something like declaring as props or something , new to react-typescript

nanobar Over a year ago

yeah for shared types I recommend you have a file like types.ts and import from there, which also avoids circular dependency issues. There are also "ambient declaration files" alternatively but I think simpler to stick to that.

Collectives™ on Stack Overflow

react.js typescript problem with JSON Array

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related