如何使用 Typescript 中的属性定义 var id 的类型？

Question

I got a job to convert js file to ts file at the moment. The issue I encountered now is; have no clue whether I should define types for id with this expression e,g, id={id}

So far, I attempted:

1. despite I actually defined it as any type, these error underlines never disappear.
2. And error messages...

• When I put mouse on its interface's 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 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 is:

   (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 are the codes that I have converted it so far.

import React from 'react'
import { ProfileIcon } from 'components/ProfileIcon'

interface ProfileIconListProps {
  id: string
  size: string
  isLeft: boolean
  profile: Array<Member>
}

**// I believe this is the problem, but no idea... **
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 to end, all lines of codes are underlined with red error marks.**
  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 origin, 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>
  )
}

Answer 1

In what you wrote it in TS, the react function is expecting to receive an object that contains the key props , while it is receiving an object that contains the props keys directly.

Try changing the function to:

export function ProfileIconList(props: ProfileIconListProps): JSX.Element {