Question

我有一个如下的容器：

par(mfrow=c(1,2))

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

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

从理论上讲，如果在容器（BurgerBuilder）的成分对象中添加“ chicken：1”，我应该会得到一个错误。也就是说，打字稿应该抱怨说我们无法指定{沙拉：数字，培根：数字，奶酪：数字，肉类：数字，鸡肉：数字}来键入{沙拉：数字|未定义，培根：数字|未定义，奶酪：数字|未定义，肉：数字|未定义}

为什么在Burger Builder中向配料对象添加“ chicken：1”时没有出现此错误？

只需尝试理解打字并做出更多反应。

Answer 1

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

关于将确切类型引入该语言的主题有一个ongoing discussion。今天，人们需要运用一些可疑的技巧使它起作用。

在此期间，我建议使用接口描述组件之间的协定。在这种情况下，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的更多信息。

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

1 个答案:

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

1 个答案:

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