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

Question

我有一个容器如下：

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

理论上，如果我将 "chicken: 1" 添加到我的容器 (BurgerBuilder) 中的成分对象，我应该会得到一个错误。即，打字稿应该抱怨说我们不能分配 { salad: number, bacon: number, cheese: number, meat: number, chicken: number } to type { salad: number |未定义，培根：数字 |未定义，奶酪：数字 |未定义，肉：数字 |未定义}

为什么我在 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。