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

Question

我现在有一份工作要把js文件转换成ts文件。我现在遇到的问题是：；不知道我是否应该用这个表达式为id定义类型e、 g，id＝｛id｝

到目前为止，我尝试过：

1. 尽管我实际上将其定义为任何类型，但这些错误下划线从未消失
2. 以及错误消息

• 当我把鼠标放在它的接口名称上时

  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)
  

• var id错误消息为：

  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)
  

• 最后，属性｛id｝错误消息是：

  (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)
  

以下是我迄今为止转换的代码。

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>
)
}

和起源，js格式。

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

在TS中编写的内容中，react函数期望接收一个包含密钥props的对象，而它直接接收一个含有props密钥的对象。

尝试将功能更改为：

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