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

Posted 2023-02-23

【中文标题】为啥打字稿不显示错误？ （反应）

【英文标题】：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”添加到成分对象时没有收到此错误？

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

【参考方案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。