Параметр функции Typescript указывает число, но получает строку

Question

Я пытаюсь вызвать сервисную функцию в Angular 9 из ввода в текстовое поле, чтобы преобразовать Цельсий в Кельвин. Я указал одну функцию, которая принимает градусы в градусах Цельсия, чтобы вычислить в Кельвинах, добавив 273,15. Вместо этого он соединяется на переднем конце. Я проверил код и убедился, что он возвращает строку после того, как принял ее как число. Преобразование в число решает проблему, но может ли кто-нибудь помочь мне понять, почему при наборе номера не произошел сбой вызова или, по крайней мере, он был разыгран на лету?

    public convertCToK(celsius: number): number { // e.g. celsius = 1
        console.log(typeof celsius); // returns 'string'
        // return celsius + 273.15; returns 1273.15
        return Number(celsius) + 273.15; // returns 274.15
    }

Функция вызова и HTML

    fahrenheit: number;
    celsius: number;
    kelvin: number;

    changeC() {
      if (!isNaN(this.celsius)) {
        this.fahrenheit = Math.round(this.calcService.convertCToF(this.celsius) * 100) / 100;
        this.kelvin = Math.round(this.calcService.convertCToK(this.celsius) * 100) / 100;
      }
    }

    <h2>Fahrenheit:
      <label>
        <input style="color:green" type='text' [(ngModel)]='fahrenheit' (keyup)="changeF()">
      </label>
    </h2>
    <hr>
    <h2>Celsius:
      <label>
        <input style='color:blue' type='text' [(ngModel)]="celsius" (keyup)="changeC()">
      </label>
    </h2>
    <hr>
    <h2>Kelvin:
      <label>
        <input style="color:red" type='text' [(ngModel)]='kelvin' (keyup)="changeK()">
      </label>
    </h2>

Answer 1

Так как ваш <input> определен как type="text", вводом будет строка (даже если вы наберете число).

Функция isNaN(someString) вернет false, если someString вы передадите в метод также может быть прочитан как число, например, «123». см. Некоторые примеры из w3school

Поскольку это проблема времени выполнения (поскольку вы определяете celsius: number; в своем файле машинописного текста, но html действительно предоставляет вам строку), вы не получит "ошибки компиляции". Изменение type="number" в вашем входе решит проблему, с которой вы столкнулись, но также предоставит вам другой интерфейс для вашего ввода.

Когда вы попытаетесь взять сумму string + number (даже если строка «10» или какая-либо другая числовая строка), вы можете получить неожиданные результаты.

Примечание

ввод Number(celsius) не совпадает с приведением. Вы конвертируете строку в число. Если вы хотите разыграть его, вы должны написать <Number> celsius Соответствующий ответ здесь,

Answer 2

Привязка текстового ввода к свойству всегда приводит к тому, что это свойство устанавливается как строка при обновлении. Объявление его как числового типа не влияет на значение времени выполнения, Typescript просто помогает вам во время разработки.

Если вы хотите обрабатывать свойство, связанное с входом, как число, вам следует установить тип ввода как число.

<input style='color:blue' type='number' [(ngModel)]="celsius" (keyup)="changeC()">

DEMO: https://stackblitz.com/edit/angular-dskyke

Обратите внимание, что в моей демонстрации свойства, связанные с вводом текста, начинаются как числа. Когда они обновляются, они становятся строками.