I need help with solving a “not assignable to type ‘intrinsic attributes & IntrinsicClassAttributes” type of error. I am fairly new to typescript and even though I have an idea of what I need to do, I also get confused on how to declare the type
#Type error
ashen breach
tired fjord
you've declared that channel needs to be an object of a specific shape via Props. ts is telling you that you aren't passing the correct shape.
how did you declare category.channels?
ashen breach
I got category.channels from an object
I did not declare a type becuse I did not think I needed to outside of the component where I needed it
tired fjord
ts is saying that the type from that object doesn't match
it should provide more details in the error
please don't retype your errors (or code, for that matter), you lose detail and create inconsistencies in the process
ashen breach
Type '{ id: number; label: string; icon: string; messages: { id: number; user: string; avatarUrl: string; date: string; text: string; }[]; description?: undefined; unread?: undefined; } | { id: number; label: string; icon: string; description: string; messages: { ...; }[]; unread?: undefined; } | ... 6 more ... | { ...; }' is not assignable to type '{ id: number; icon?: "Book" | "Speakerphone" | "HashtagWithSpeechBubble" | "Discord" | "Verified" | "Check" | "Chevron" | "Arrow" | "AddPerson" | "Hashtag" | "Bell" | "Pin" | "People" | "Inbox" | "QuestionCircle" | "Spyglass" | undefined; label: string; }'.
Type '{ id: number; label: string; icon: string; messages: { id: number; user: string; avatarUrl: string; date: string; text: string; }[]; description?: undefined; unread?: undefined; }' is not assignable to type '{ id: number; icon?: "Book" | "Speakerphone" | "HashtagWithSpeechBubble" | "Discord" | "Verified" | "Check" | "Chevron" | "Arrow" | "AddPerson" | "Hashtag" | "Bell" | "Pin" | "People" | "Inbox" | "QuestionCircle" | "Spyglass" | undefined; label: string; }'.
Types of property 'icon' are incompatible.
Type 'string' is not assignable to type '"Book" | "Speakerphone" | "HashtagWithSpeechBubble" | "Discord" | "Verified" | "Check" | "Chevron" | "Arrow" | "AddPerson" | "Hashtag" | "Bell" | "Pin" | "People" | "Inbox" | "QuestionCircle" | "Spyglass" | undefined'.ts(2322)
Channels.tsx(4, 3): The expected type comes from property 'channel' which is declared here on type 'IntrinsicAttributes & Props'
tired fjord
Types of property 'icon' are incompatible.
there's your issue
ashen breach
This is all of the error I am getting
tired fjord
Type 'string' is not assignable to type '"Book" | "Speakerphone" | "HashtagWithSpeechBubble" | ... | undefined
this is saying that the info you're getting is less specific, so you can't assign it
if the info really is less specific, or you can't control it, you should add runtime validation
if it isn't, then you could probably specify that somewhere for ts
ashen breach
I have no idea how to do that
This is my interface
interface Props {
channel: {
id: number;
icon?: keyof typeof Icons;
label: string;
};
}
What chance do you think I could make to it as I only need these value for my component
change*
Oh yes I see what you mean
When I change icon?: keyof type of Icon to string it fixes the type error but then I get another error with Icon[channel.icon]
tired fjord
if the info really is less specific, or you can't control it, you should add run...
if the info really is less specific
is it? answer that first.
ashen breach
I am not sure what you mean by less specific but the correct type should be 'string''but I am allso trying to make channel.icon a key of Icons as in Icon[channel.icon] but It throws a type error when I do without first declearing the type keyof typeof Icons
tired fjord
if it can be any string, then you have to check if it's a valid icon before trying to get the icon
check for channel.icon in Icon
ashen breach
I just fixed it by declaring channel as keyof typeof Icon in my ternary operator and that is Icons[channel.icon as keyof typeof Icons]
I do not get an type error that way
Maybe there is a better way to go about it
ashen breach
Is it safe to add the condition to my ternary operation for example const Icon =
channel.icon && channel.icon in Icons
? Icons[channel.icon as keyof typeof Icons]
: Icons.Hashtag;
tired fjord
sure, but you won't need the assertion then
tired fjord
!hb assertion
sour waveBOT