首页 文章

为什么打字稿没有显示错误？ （反应）

提问于
浏览 次
0

我有一个容器如下：

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

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

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

理论上，如果我将“chicken：1”添加到我的容器（BurgerBuilder）中的成分对象中，我应该会收到错误 . 打字稿应该抱怨说我们不能分配{salad：number，bacon：number，cheese：number，meat：number，chicken：number}来输入{salad：number | undefined，bacon：number | undefined，cheese：number | undefined，meat：number |未定义}

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

只是想了解打字并做出更多反应 .

reactjs typescript typescript2.0

1 回答

  • 2

    TypeScript使用所谓的子结构类型系统，这意味着只要你的对象包含你从中提出的所有内容，其余的就不重要了 .

    围绕将精确类型引入该语言的主题有一个ongoing discussion . 今天，人们需要采用一些有问题的技巧来使其发挥作用 .

    与此同时，我建议使用界面描述组件之间的 Contract . 在这种情况下， 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.
        },
    };
}

    您可以阅读有关类型关系的更多信息in the specification .

    回复于

相关问题