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

【问题标题】：Why isn't typescript showing an error? (React)为什么打字稿不显示错误？（反应）
【发布时间】：2019-05-10 21:37:49
【问题描述】：

我有一个容器如下：

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

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

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

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

【问题讨论】：

标签： reactjs typescript typescript2.0

【解决方案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。

【讨论】：