TypeScript Angular - Adding string to a number property is resulting to a value of zero (0)

Question

I'm working with Angular and Typescript and I'm wondering how come that if I add a value of string for example "hahah" to a field which should accept numbers only and it's binded to property of type number also wont fire or trigger any error, insted of that value of that field will be zero! I mean that is fine for me, it's better to result as a zero than to result as a some strange value, but I'm just curious how is that?

Here is how my typescript class looks:

export class Article {

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

 }

Here is my template .html file:

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

As you can see guys inputs are binded to [(ngModel)]="article.price" and to [(ngModel)]="article.price2" and they looks like this when app is runned:

But everything is fine if I type something like this:

And when I do post, In my database is stored value : ZERO (0) !

How come?

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

Thanks

Ramesh Rajendran · Accepted Answer · 2018-05-28 13:57:54Z

Yeah!

Typescript changing the value depends by the property type without throwing error.

like

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

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

So if you pass string add("aa" +"aa"); it return 0. because the function parameters (number n,number n2) is type. So it's converting a number (if it's not a number then it's assuming as 0)

Suggestion:

the better way is you can use type="number" instead of type="text" in your input element to avoiding to type any string value in the input box

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

douxsey · Accepted Answer · 2018-05-28 19:10:19Z

Typescript is a superset of javascript, it add static type checking. So all the code you write in typescript will be transpiled in javascript At runtime which have no type safety.

Typescript mostly acts on compile time in this example we have no information on what the user will type so impossible to check it when compiling.

Typescript transpiling

If you have a code like this

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

typescript can know that you are calling the function with bad params, that won't compile. you can play with it at https://www.typescriptlang.org/play/index.html

On runtime we will just have

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

so if a library call it with bad params you cant check it or throw an error.

A way to solve it

That can be solved by Typescript if they had type guard on the transpiled version like this:

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

for primitive type that can be simple but for classes it's more complex.

There's an issue for that https://github.com/Microsoft/TypeScript/issues/1573

But they claim it's against there Design Goals.

Collectives™ on Stack Overflow

TypeScript Angular - Adding string to a number property is resulting to a value of zero (0)

2 Answers 2

Suggestion:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Suggestion:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related