Question

给出以下返回JSX组件的函数：

const getListContent = () => {
    switch (true) {
        case loading:
            return <ListLoadingIndicator/>;
        case error !== undefined:
            return <ListError error={error}/>;
        default:
            return <ListContent/>
    }
};

Typescript编译器抱怨error无法分配给ListError组件，因为ListError接口期望error的类型为Error，但是此组件的界面允许使用Error | undefined类型。

添加一个爆炸声<ListError error={error!}/>可以解决此问题，但是我想了解为什么编译器在我明确检查error是否未定义后认为fn get_cloned<'a>(obj: &'a MyStruct) -> impl Fn() -> MyStruct { || {obj.clone()} }是不确定的。

Answer 1

基本上，在TypeScript中对switch语句的控制流分析将缩小切换值的类型，而不是其他值的类型。因此，switch (true) {}只会将true缩小到其他范围，这对您没有用。至少从2016年起，它看起来就不像TypeScript的have any interest in changing this族。

我的建议是直接对要缩小的值进行if或switch或?测试。如果您希望error从Error | undefined缩小到Error，则应直接检查error。例如，以下方法应该起作用：

const getListContent = () => {
  if (loading) return <ListLoadingIndicator />;
  if (error !== undefined) return <ListError error={error} />;
  return <ListContent />
};

建议使用以下简短语法：

const getListContent = () =>
  loading ? <ListLoadingIndicator /> :
    error ? <ListError error={error} /> :
      <ListContent />;

这也应该起作用。好的，希望能有所帮助；祝你好运！

Answer 2

这里https://github.com/Microsoft/TypeScript/issues/2214对此进行了一些讨论，其中electricessence基本上指出，非常量的switch语句虽然被允许，但它们不是规范性情况，因此并非所有功能都可以按预期工作。基本上，这不是TypeScript当前处理的事情。您可以为此打开功能请求。在简短搜索中找不到公开的人。

显式类型检查后，Typescript无法分配错误

2 个答案: