I recently received a task to convert a JavaScript file to a TypeScript file. One issue I am currently facing is whether or not I should define types for the 'id' with this expression, e.g., id={id}.
So far, I have tried:
- Even though I defined it as any type, the error underlines persist.
- And the error messages...
When hovering over its interface name,
Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739) Conversion of type 'string' to type 'ProfileIconListStyle' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)and the 'var id' error message is:
Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739) Conversion of type 'string' to type 'ProfileIconListStyle' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352) '>' expected.ts(1005)Lastly, the property {id} error message states:
(property) id: string Type '{ id: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739) Type '{ id: string; }' is not assignable to type 'ProfileIconListStyle'. Object literal may only specify known properties, and 'id' does not exist in type 'ProfileIconListStyle'.ts(2322)
Here is my converted code so far:
import React from 'react'
import { ProfileIcon } from 'components/ProfileIcon'
interface ProfileIconListProps {
id: string
size: string
isLeft: boolean
profile: Array<Member>
}
**// I suspect this is the problem, but unsure...**
interface ProfileIconListStyle {
isLeft: boolean
}
interface Member {
src: string
color: string
}
export function ProfileIconList({ props }: { props: ProfileIconListProps }): JSX.Element {
var { id, size, isLeft, profile } = props
isLeft = isLeft === false ? false : true
**// From here onwards, all lines of codes are marked with red error highlights.**
return (
<ProfileIconListStyle id={id} isLeft={isLeft}>
{profile.map((member: Member, index: number) => {
return <ProfileIcon key={`${id}-list-${index}`} props={{ size, src: member.src, color: member.color }} />
})}
</ProfileIconListStyle>
)
}
And the original JS format:
import React from 'react'
import { ProfileIcon } from 'components/ProfileIcon'
export function ProfileIconList(props) {
var { id, size, isLeft, profile } = props
isLeft = isLeft === false ? false : true
return (
<ProfileIconListStyle id={id} isLeft={isLeft}>
{profile.map((member, index) => {
return <ProfileIcon key={`${id}-list-${index}`} size={size} src={member.src} color={member.color} />
})}
</ProfileIconListStyle>
)
}