时间戳

首页 > 解决方案 > 为什么打字稿不显示错误？（反应）

reactjs - 为什么打字稿不显示错误？（反应）

问题描述

我有一个容器如下：

lass BurgerBuilder extends React.Component {

state = {
    ingredients: {
        salad: 1,
        bacon: 1,
        cheese: 2, 
        meat: 2
    }
}
render() {
    return(
        <>
            <Burger ingredients={this.state.ingredients}/>
            <div>Build Controls</div>
        </>
    );
}
}

我的 Burger 功能组件包括以下代码

export interface IBurgerProps {
    ingredients: {
        salad?: number,
        bacon?: number,
        cheese?: number, 
        meat?: number
    }
}

const burger = (props: IBurgerProps) =>{
    const transformedIngredients = Object.keys(props.ingredients).map(igKey=> {
        return [...Array(props.ingredients[igKey])].map((_, i) => {
            <BurgerIngredient key={igKey + i} type={igKey}/>
        })
    });

从理论上讲，如果我在容器 (BurgerBuilder) 中的成分对象中添加“chicken: 1”，我应该会收到错误消息。即，打字稿应该抱怨说我们不能分配{沙拉：数字，培根：数字，奶酪：数字，肉：数字，鸡肉：数字}来输入{沙拉：数字| 未定义，培根：数字 | 未定义，奶酪：数字 | 未定义，肉：数字 | 不明确的}

为什么我在 Burger Builder 的成分对象中添加“chicken: 1”时没有收到此错误？

只是试图理解打字并做出更多反应。

标签： reactjstypescripttypescript2.0

解决方案

TypeScript 使用所谓的子结构类型系统，这意味着只要您的对象具有您要求的所有内容，其余的并不重要。

围绕向语言引入精确类型的主题正在进行讨论。今天，人们需要使用一些有问题的技巧来使其发挥作用。

同时，我建议使用接口来描述组件之间的契约。在这种情况下，Ingredients是接口——它是两个组件所依赖的。

让我们从您的组件中抽象出来。示例模型可能如下所示：

type IngredientName =
  | 'salad'
  | 'bacon'
  | 'cheese'
  | 'meat';

type Ingredients = Record<IngredientName, number>

用法：

interface Props {}

interface State {
    ingredients: Ingredients;
}

export class BurgerBuilder extends React.Component<Props, State> {
    state: State = {
        ingredients: {
            salad: 1,
            bacon: 1,
            cheese: 2,
            meat: 2,
            chicken: 2, // Error! Chicken is not on the list.
        },
    };
}

您可以在规范中阅读有关类型关系的更多信息。

推荐阅读