如何将其转换为打字稿答案

【问题标题】：how to convert this into a typescript如何将其转换为打字稿
【发布时间】：2022-01-24 07:30:59
【问题描述】：

如何在打字稿中制作这个 jsx。在 javascript 中，它看起来像这样。但是在打字稿中，我不知道如何实现这个确切的代码！

const Users = ({details,deleteUser}) => {
    return (
        <>
            <div>
            {details.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                    <td className='delete-btn' onClick={() => deleteUser(detail.del)}>
                        Delete
                    </td>
                </tr>
            ))}
            </div>
        </>
    )}

【问题讨论】：

Javascript 始终是有效的 Typescript。您可能希望使用 Javascript 提供的字符串插值，例如将 {detail.del} 替换为 ${detail.del}。我认为在提出这样的问题之前，您可能需要做更多的研究，因为我们希望有一段工作代码或一个特定的错误可以使用。另外，我认为这个问题可以使用更多的解释。
@Randy 不是 OP 的代码 JSX？

标签： javascript typescript jsx

【解决方案1】：

首先你应该定义你的道具类型：

type User = {
  del: string;
  name: string;
  email: string;
  pass: string;
  contact: string;
};
type UsersProps = {
  details: User[];
  deleteUser: (del: string) => void;
};

在此之后，您应该将类型应用于组件道具：

const Users = (props: UsersProps) => {
    const {details,deleteUser} = props;
    return (
        <>
            <div>
            {details.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                    <td className='delete-btn' onClick={() => deleteUser(detail.del)}>
                        Delete
                    </td>
                </tr>
            ))}
            </div>
        </>
    )
};

通过这种方式，打字稿会向您显示任何错字，例如，如果您写 detail.mail 而不是 detail.email，ts 会为您突出显示。

【讨论】：

但是我从另一个组件传递道具意味着我该如何实现
您可以像往常一样简单地使用该组件：<Users details={details} deleteUser={deleteUser} />

【解决方案2】：

首先，你需要打字稿中的用户界面。

export default interface IUser {
   id: number,
   name: string,
   image: string,
   ...others
}

然后你需要定义它应该看起来像用户界面的传递参数。所以代码将是。

{details<IUser[]>.map(detail => (
                <tr key={detail.del}>
                    <td>{detail.del}</td>
                    <td>{detail.name}</td>
                    <td>{detail.email}</td>
                    <td>{detail.pass}</td>
                    <td>{detail.contact}</td>
                </tr>
            ))}

【讨论】：