类型 \'boolean\' 不可分配给类型 \'number\'答案

【问题标题】：Type 'boolean' is not assignable to type 'number'类型 \'boolean\' 不可分配给类型 \'number\'
【发布时间】：2023-01-22 19:36:00
【问题描述】：

我正在寻找这个问题的答案，但找不到。所以，我有这个界面：

export interface productsListFromOrder{
  product_name: string,
  amount: number,
  price: number,
}

我制作了这个对象的数组，然后推送：

  products:productsListFromOrder[] = []; //productsListFormOrder is my interface
  myFunction(): void{
//...
        this.products.push({
          product_name: product?.name!,
          price: product?.price!,
          amount: element.amount ? parseInt(element.amount) : 1
        })
}

问题是我的标题有错误：

类型“布尔”不能分配给类型“数字” 我确定该类型是正确的，因为我测试了一些东西：

我显示价格类型，它显示数字
console.log(typeof product?.price!);

我在 any[] 上设置了产品数组类型，它工作正常，但我想使用我的界面

products:productsListFromOrder[] = [];

我是这样解决这个问题的

regular_price: typeof product?.price! == 'boolean' ? 0 : product?.price!,

好的，如果我使用方法 2 或 3，我的代码可以工作，但这不是我的目标。我需要使用我的界面（而不是第 2 点中的任何[]）和第 3 点的代码很难看.是什么最重要的-为什么我有这个错误？ Product.price 有一个型号.我如何在不检查类型的情况下编写这段代码？

【问题讨论】：

product的接口是什么？
请提供一个minimal reproducible example，清楚地说明您面临的问题。理想情况下，有人可以将代码粘贴到像 The TypeScript Playground (link here!) 这样的独立 IDE 中，然后立即着手解决问题，而无需首先重新创建它。所以不应该有伪代码、拼写错误、不相关的错误或未声明的类型或值。
对象类型名称通常以 UpperPascalCase 书写，以区别于值名称和原始类型；请将productsListFromOrder 更改为ProductsListFromOrder，以免分散您对问题的注意力。

标签： angular typescript

【解决方案1】：

TypeScript 中的感叹号操作称为“Non-Null Assertion Operator” this question 和答案提供了深入了解其含义的方法。

当你这样做时：

 product?.name!,

这是不正确的。由于您在感叹号运算符（断言 product?.name 不是 null 或未定义）之前使用问号运算符（这可能允许 product?.name 为 null 或未定义）。

我相信你已经禁用了一些类型脚本验证，否则你会收到以下错误：

product?.name!:

TSLint：禁止的非空断言（no-non-null-assertion）

具有小写的接口名称 productsListFromOrder：
TSLint：类名必须采用 Pascal 大小写

第二个是 jcalz 的 cmets 指出的简单修复，将其更改为 ProductsListFromOrder

关于错误“类型‘布尔值’不可分配给类型‘数字’”

我建议你在这里变量product：
       this.products.push({
          product_name: product?.name!,
          price: product?.price!,
          amount: element.amount ? parseInt(element.amount) : 1
        })
不知何故，它的price 属性带有一个布尔值的隐式接口。这反过来会导致您收到错误。

要解决它，

方案一（丑）

您可以将 price 的值粗化为数字：
  price: <number><unknown>product?.price,
选项 2（我的建议）

您应该调整变量product，这样它就永远不能为其价格属性提供布尔接口。

【讨论】：

【解决方案2】：

在角度，我遇到这个错误ngx-闪烁装载机。在模板中点击可见的财产ngx-shimmering-loader.角度语言服务将转到 ngx-shimmering-loader 文件...如果没有，则重新安装角度语言服务并重新启动 IDE。在 ngx-shimmering-loader 文件中更改从可见：细绳; 到可见：布尔值；

它对我有用。

【讨论】：