在 React 中使用 TypeScript 在函数组件中使用接口 Props

介绍

在 React/TypeScript 应用中编写函数或类组件通常需要定义传递给它们的 props 的类型。它会强制执行类型检查，以便代码遵守定义的契约。本指南将介绍如何使用 TypeScript 接口对函数组件中的 props 进行强类型化。

用例

假设您的目标是在网页上显示预算概览表。对于每个预算，应在表中呈现一行以显示每个预算类别，包括预算金额、已支出金额和类别中的剩余金额。表中可能会显示一个或多个预算。您将创建一个函数组件来实现此目的。

设置 React TypeScript 应用程序

打开您的终端并运行这些命令以在您的机器上运行示例 TypeScript 应用程序。

      npx create-react-app my-app --template typescript
cd my-app
yarn start
    

要在开发模式下运行应用，请在浏览器中打开https://localhost:3000。您应该会看到示例 TypeScript 应用正在运行。

添加新组件

在src目录中创建一个名为BudgetOverview.tsx的新组件并添加此代码。

      import React from "react";

export const BudgetOverview = () => {
    return <div className="Budget-Overview">
        <table>
            <tbody>
            <tr className="Table-Header">
                <td>
                    <h4>CATEGORY</h4>
                </td>
                <td>
                    <h4>BUDGETED</h4>
                </td>
                <td>
                    <h4>SPENT</h4>
                </td>
                <td>
                    <h4>REMAINING</h4>
                </td>
            </tr>            
            </tbody>
        </table>
    </div>
}
    

<BudgetOverview>返回一个表格，其中包含一行和四列作为标题。表格将很快填充数据。

下一步是为<BudgetOverview>组件添加样式。使用以下代码替换src/App.css文件中现有的css 。

      .App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    min-height: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

table {
    display: flex;
    justify-content: center;
    border: 1px solid gray;
    margin: 5vh;
}

td {
    border: 1px solid gray;
    width: 30em;
}

.Budget-Overview {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.Table-Header {
    background-color: #96bb7c;
}
    

增加预算接口

目标是在表格行中显示每个预算的数据。为此，您首先将定义一个具有三个属性的预算接口：

预算：数字- 某个类别的预算金额。这应该是数字类型。
已花费：数字- 已在某个类别中花费的金额。这也应该是数字类型。
类别：字符串- 预算类别的名称。它应该是字符串类型。

      interface Budget {
    budgeted: number,
    spent: number,
    category: string,
}

export default Budget;
    

创建一个新文件src/interfaces.ts ，并在该文件中添加预算接口的代码。

添加界面道具

描述了预算特征后，<BudgetOverview>组件应该接受预算数据作为props。

您可以通过在src/BudgetOverview.tsx文件中创建另一个接口BudgetProps来实现这一点。

      interface BudgetProps {
    budgets: Budget[];
}
    

此接口有一个属性，budgets，它是一个数组。此数组中的每个元素都应为Budget类型（在src/interfaces.ts中定义）。

<BudgetOverview>组件现在可以接受类型为BudgetProps的props，遍历预算数组中的每个元素，并将其呈现在网页上。更新您的<BudgetOvervie>组件，如下所示，以包含强类型的props。

      import React from "react";
import Budget from "./interfaces";

interface BudgetProps {
    budgets: Budget[];
}

export const BudgetOverview: React.FC<BudgetProps> = ({budgets}: BudgetProps) => {
    return <div className="Budget-Overview">
        <table>
            <tbody>
            <tr className="Table-Header">
                <td>
                    <h4>CATEGORY</h4>
                </td>
                <td>
                    <h4>BUDGETED</h4>
                </td>
                <td>
                    <h4>SPENT</h4>
                </td>
                <td>
                    <h4>REMAINING</h4>
                </td>
            </tr>
            {budgets.map(item => {
                return <BudgetItem budgeted={item.budgeted}
                                   spent={item.spent}
                                   category={item.category}>
                </BudgetItem>
            })}
            </tbody>
        </table>
    </div>
}
    

<BudgetOverview>组件是BudgetProps类型的 React 函数组件，用React.FC<BudgetProps>表示。

预算的类型由代码({budgets}: BudgetProps)强制执行。如果您尝试向其传递BudgetProps以外的任何类型的数组，编译器将抛出错误。

在表格主体内部，有代码用于迭代预算数组并在每次迭代时返回一个组件<BudgetItem> 。 <BudgetItem>接受三个 props （预算、花费和类别）来呈现它们的值。

这是<BudgetItem>组件的代码。将其添加到src/BudgetOverview.tsx文件中。

      const BudgetItem: React.FC<Budget> = ({category, budgeted, spent}: Budget) => {
    const remainingAmount: number = (budgeted - spent) > 0 ? (budgeted - spent) : 0;
    return <tr>
        <td>
            <h5>{category}</h5>
        </td>
        <td>
            <h5>{"$" + budgeted}</h5>
        </td>
        <td>
            <h5>{"$" + spent}</h5>
        </td>
        <td>
            <h5>{"$" + remainingAmount}</h5>
        </td>
    </tr>
}
    

此组件也是Budget类型的 React 函数组件。如果您还记得，我们定义了一个Budget类型（src/interfaces.ts ），它恰好具有这三个属性。同样，使用 interface 作为 props 为将使用<BudgetItem>的组件创建了严格的契约。

它返回一个包含四列的表格行。每列呈现预算类别的值、类别中的预算金额、已花费金额和类别中的剩余金额。它还包含一些使用预算和已花费值计算剩余金额的逻辑。如果已花费金额超过预算，则显示剩余金额为0 美元。

更新应用程序组件

<BudgetOverview>组件已准备就绪。您需要做的就是调用此函数组件并将props传递给它。

转到src/App.tsx文件并用下面给出的代码替换<App>组件中的代码。

      import React from 'react';
import './App.css';
import {BudgetOverview} from "./BudgetOverview";

const homeBudgets = [
   {
       budgeted: 500,
       spent: 200,
       category: "Food",
   },
   {
       budgeted: 1000,
       spent: 1500,
       category: "Utilities",
   }
]

function App() {
   return (
       <div className="App">
           <header className="App-header">Budget Table using TypeScript & React</header>
           <BudgetOverview budgets={homeBudgets}/>
       </div>
   );
}

export <span 

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文