【问题标题】:Typescript error This condition will always return 'true' since the types have no overlap打字稿错误此条件将始终返回“true”,因为类型没有重叠
【发布时间】:2019-05-12 04:20:42
【问题描述】:

我在表单组上遇到这种情况:

if((age>17 && (this.frType=="Infant")) 
|| (age>40 && this.frType=="Grandchild")
|| (age<=5 && 
   (this.frType!="Child" 
   || this.frType!="Infant" 
   || this.frType!="Grandchild" || this.frType!="Cousin")))

它包含三个主要条件:

  1. 如果是17岁的人,不能设置为infant
  2. 如果一个人大于40,他不能是grandchild
  3. 如果一个人小于5岁,他应该是childinfantgrandchildcousin

如果这些条件之一为真,我将发送一条错误消息。

我收到的错误是:

[ts] 此条件将始终返回“真”,因为类型 “儿童”和“婴儿”没有重叠。 [2367]

关于if条件的这一部分:

|| this.frType!="Infant" || this.frType!="Grandchild" || this.frType!="Cousin")))

我在不同的组件中使用了确切的条件,它没有显示错误。

if((age>17 && (this.family_relation_type=="Infant")) 
|| (age>40 && this.family_relation_type=="Grandchild")
|| (age<=5 && 
   (this.family_relation_type!="Child" || 
    this.family_relation_type!="Infant" || 
    this.family_relation_type!="Grandchild" || 
    this.family_relation_type!="Cousin")))

这是我计算两个部分的年龄的方法:

let timeDiff = Math.abs(Date.now() - this.formGroup.controls['dob'].value);
let age = Math.floor((timeDiff / (1000 * 3600 * 24))/365);

【问题讨论】:

  • 在进行隐式值比较时发生。使用“===”和“!==”代替“==”和“!=”。

标签: javascript angular typescript typescript2.0


【解决方案1】:

考虑独立表达式:

(this.frType!="Child" || this.frType!="Infant")

如果frTypeChild,则第二部分为真,因此表达式的计算结果为true。如果frTypeInfant,那么第一部分将为真,因此表达式的计算结果为true。如果frType 既不是 Child 也不是Infant,那么第一部分将为真,表达式将再次评估为true - 逻辑有问题,它会始终解析为true

(如果您为GrandchildCousin 添加额外的|| 条件,同样的事情会不断发生——它总是会解析为true

改用&amp;&amp;

|| (age<=5 && (
   this.frType!="Child" 
   && this.frType!="Infant" 
   && this.frType!="Grandchild"
   && this.frType!="Cousin"
 ))

或者,为了使逻辑更容易理解,您可以考虑使用数组,并使用.includes

const kidsFiveAndUnder = ['Child', 'Infant', 'Grandchild', 'Cousin'];
// ...
|| (age <= 5 && !kidsFiveAndUnder.includes(this.frType))

【讨论】:

  • 感谢您的明确✌?
【解决方案2】:

也许我可以帮助某人。

在我的情况下,错误是由以下原因触发的:

*ngIf="fooArray.length === 0"

所以我修改为:

*ngIf="fooArray.length &lt; 1"

对我来说毫无意义,但它有效。

【讨论】:

  • 最好去掉 Angular *ngIf 的东西,这只是与手头的 TypeScript 问题无关的噪音。
  • 我知道这不是 TS 问题的一部分,我只是想帮助遇到相同情况的任何人。
【解决方案3】:

明确定义所有变量的数据类型。

例如,此代码与线程标题中提到的错误相同,我通过显式定义变量的数据类型来修复。

发件人:

const selectedLangCulture = "en"; // or "ar-SA"
const direction = "rtl";
const languageChanged =
  (direction === "rtl" && selectedLangCulture === "en") ||
  (direction === "ltr" && selectedLangCulture === "ar-SA");

收件人:

const selectedLangCulture: string = "en"; // Put the datatype string.
const direction: string = "rtl"; // Put the datatype string.
const languageChanged =
  (direction === "rtl" && selectedLangCulture === "en") ||
  (direction === "ltr" && selectedLangCulture === "ar-SA");

【讨论】:

  • 奇怪但非常好。它解决了我的问题,谢谢。
【解决方案4】:

就我而言,我只需要重新构建我的应用程序,因为类型定义暂时不同步。

【讨论】:

    【解决方案5】:

    我最近遇到了这个问题。在这里分享我的经验

    基本上 IDE 不允许将 object.enum 与字符串进行比较。作为解决方案,在component.ts中添加一个方法来比较枚举

    详情:

    export enum Status {
         NEW,
         PROGRESS,
         FINISHED
    }
    
    export interface Model {
       id : number;
       name : string;
       status : Status
    }
    

    现在在component.html中,我试图比较模型状态

    <div *ngFor="let m of modelItems" >
          <i *ngIf="m.status === 'NEW'" class="icon-new"></i>
    </div>
    
    Error : This condition will always return 'false' since the types 'Status' and 'string' have no overlap.ngtsc(2367)
    

    我还尝试在 component.ts 中定义状态枚举并将其用于比较

    public StatusEnum = Status; 
    
    <div *ngFor="let m of modelItems" >
          <i *ngIf="StatusEnum[m.status] === 'NEW'" 
            class="icon-new"></i>
    </div>
    

    使用上述解决方案,IDE 没有错误,但条件永远不会为真,因为 enum[value] 给出了一个数值。

    我尝试的下一个选项如下

    <div *ngFor="let m of modelItems" >
          <i *ngIf="m.status=== StatusEnum[StatusEnum.NEW]" class="icon-new"></i>
        </div>
    

    但在 IDE 中再次出现错误

    Error : This condition will always return 'false' since the types 'Status' and 'string' have no overlap.ngtsc(2367)
    

    终于解决了它在component.ts中实现方法的问题

    解决方案

    组件.ts

    public StatusEnum = Status; //To refer in the HTML
    
     checkStatus(m: Model, status: Status): boolean {
        return Status[m.status] as unknown === status;
      } 
    

    注意:Status[m.status] 为未知

    HTML

    <div *ngFor="let m of modelItems" >
           <i *ngIf="checkStatus(m,StatusEnum.NEW)" 
           class="icon-new"></i>
      </div>    
    

    【讨论】:

      猜你喜欢
      • 2022-11-09
      • 1970-01-01
      • 2020-07-26
      • 1970-01-01
      • 2021-07-29
      • 2020-12-11
      • 2019-07-03
      • 2020-01-05
      • 1970-01-01
      相关资源
      最近更新 更多