打字稿错误此条件将始终返回“true”，因为类型没有重叠

Question

我在表单组中遇到这种情况：

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")))

它包含3个主要条件：

1. 如果是17岁的人，则无法设置为

   infant

2. 如果一个人超过40岁，他就不能成为

   grandchild

3. 如果一个人不满 5 岁，他应该是

   child

   、

   infant

   、

   grandchild

   或

   cousin

   。

如果其中一个条件成立，我将发送一条错误消息。

我收到的错误是：

[ts] 此条件将始终返回“true”，因为类型 “儿童”和“婴儿”没有重叠。 [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);

Answer 1

考虑独立的表达式：

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

如果

frType

是

Child

，则第二部分将为真，因此表达式将计算为

true

。如果

frType

是

Infant

，那么第一部分将为 true，因此表达式的计算结果将为

true

。如果

frType

既不是 Child

 也不是 

Infant

，那么第一部分将为 true，并且表达式将再次计算为 

true

 - 逻辑是错误的，它总是会解析为 

true

.

（如果您为

||

 和 

Grandchild

 添加额外的 

Cousin

 条件，同样的事情会不断发生 - 它将始终解析为 

true

）

使用

&&

 代替：

|| (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))

Answer 2

也许我可以帮助别人。

在我的例子中，错误是由以下原因触发的：

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

所以我修改为：

*ngIf="fooArray.length < 1"

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

Answer 3

我最近被这个问题困扰了。在此分享我的经验

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

详情：

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

注意：状态[m.status]未知

HTML

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

Answer 4

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

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

来自：

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");

Answer 5

就我而言，我使用名为

type

 的类型作为带有 

React.ComponentPropsWithRef<'button'> 的按钮元素

type ButtonProps = {
  type?: 'submit' | 'button' | 'link'; // ❌
} & React.ComponentPropsWithRef<'button'>;

type

 被覆盖，因为 

React.ComponentPropsWithRef<'button'>

 中也有 

type

。我把它替换为

elementType

，问题就解决了。

type ButtonProps = {
  elementType?: 'submit' | 'button' | 'link'; // ✅
} & React.ComponentPropsWithRef<'button'>;

Answer 6

它看起来像打字稿

有助于“简化逻辑”

因此它有助于删除不必要的逻辑代码。

'||'意思是
• 一个为真 -> 全部为真，所以之后的比较是不必要的
'&&' 意味着一个 false -> 全 false，所以比较是必须的

通过下面的代码会有更好的理解。

Answer 7

就我而言，我只需重建我的应用程序，因为类型定义短暂不同步。

Answer 8

大多数情况下，在打字稿基础架构中，当您在比较或转换数据时没有正确的类型转换时，最常见的错误就会出现。

检查您正在操作的数据类型。
来自请求的数据已正确转换为所需的数据。
检查声明的条件。