首页 文章

TypeScript Angular - 将数字属性添加到数字属性，结果为零（0）

提问于
浏览 次
1

我正在使用Angular和Typescript，我想知道如果我将一个字符串的值例如“hahah”添加到一个只接受数字的字段并且它绑定到类型编号的属性也不会触发或触发任何错误，该字段的值将被归为零！我的意思是对我来说没问题，最好将结果作为一个零，而不是作为一个奇怪的 Value ，但我只是好奇这是怎么回事？

以下是我的typescript类的外观：

export class Article {

  public id: string;
  public price: number;
  public price2: number;

 }

这是我的模板.html文件：

<div class="form-group">
  <label class="control-label dash-control-label col-sm-3" for="">Price:</label>
  <div class="col-sm-3">
    <input type="text" class="form-control dash-form-control" id="" placeholder="" name="price" [(ngModel)]="article.price">
  </div>

  <label class="control-label dash-control-label col-sm-3" for="">Price 2:</label>
  <div class="col-sm-3">
    <input type="text" class="form-control dash-form-control" id="" placeholder="" name="price2" [(ngModel)]="article.price2">
  </div>
</div>

正如你所看到的那样，人们的输入绑定到了 [(ngModel)]="article.price" 和 [(ngModel)]="article.price2" ，当app运行时它们看起来像这样：

enter image description here

但如果我键入这样的东西，一切都很好：

enter image description here

当我发帖时，在我的数据库中存储值：ZERO（0）！

怎么会？

Why there is no error like I'm trying to add a string to a number or whatever?

谢谢

javascript angular typescript

2 回答

  • 1

    是啊！

    Typecript更改值取决于属性类型而不会抛出错误 .

    喜欢

    add(a:number , bnumber )
  {
    console.log(a+b); 
  }

add("1",2);// result is 3

    因此，如果传递字符串 add("aa" +"aa"); ，则返回0.因为函数参数（ number n,number n2 ）是类型 . 所以它's converting a number (if it'不是一个数字然后它假设为 0 ）

    建议：

    更好的方法是在输入元素中使用type =“number”而不是type =“text”，以避免在输入框中键入任何字符串值

    <div class="form-group">
  <label class="control-label dash-control-label col-sm-3" for="">Price:</label>
  <div class="col-sm-3">
    <input type="number" class="form-control dash-form-control" id="" placeholder="" name="price" [(ngModel)]="article.price">
  </div>

  <label class="control-label dash-control-label col-sm-3" for="">Price 2:</label>
  <div class="col-sm-3">
    <input type="number" class="form-control dash-form-control" id="" placeholder="" name="price2" [(ngModel)]="article.price2">
  </div>
</div>
    回复于
  • 0

    Typescript是javascript的超集，它添加了静态类型检查 . 因此，您在typescript中编写的所有代码都将在javascript中转换为运行时没有类型安全性 .

    Typescript mostly acts on compile time 在这个例子中，我们没有关于用户输入内容的信息，因此在编译时无法检查它 .

    Typescript transpiling

    如果您有这样的代码

    function add(a: number, b: number) {
  return a + b;
}
add('de', 'de');//compile error

    typescript可以知道你正在调用带有坏参数的函数，这些函数不能编译 . 你可以在https://www.typescriptlang.org/play/index.html玩它

    在 runtime 我们将拥有

    function add(a, b) {
  return a + b;
}

    因此，如果一个库用坏参数调用它，你就无法检查它或抛出错误 .

    A way to solve it

    这可以通过Typescript解决，如果他们在转换后的版本上有类型保护，如下所示：

    export function add(x: number, y: number): number {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new TypeError('x and y need to be numbers');
  }
  return x + y;
}

    对于原始类型，它可以很简单，但对于类来说，它更复杂 .

    有一个问题https://github.com/Microsoft/TypeScript/issues/1573

    但是他们声称它违背了设计目标 .

    回复于

相关问题