类型'string |的参数 编号 string []'不可分配给'string'类型的参数

Question

I have code in my typescript file

Here is code

slide(event, ui) {
    $(`#stops_${i}`).val(`Max ${ui.value} ${__('byten')}`);
    $(`#filter_stops_${i}`).val(ui.value);
    if ((ui.value > 0) && ($('#filter_direct').val() === '1')) {
      $('#filter_direct').parent().children('.Switch').removeClass('On').addClass('Off');
      $('#filter_direct').val('0');
    }
    let stop_sum = 0;
    $('.filter_stops').each(function() {
      return stop_sum += parseInt($(`#filter_stops_${$(this).attr('id').split('_')[1]}`).val());
    });
    if ((stop_sum === 0) && ($('#filter_direct').val() === '0')) {
      $('#filter_direct').parent().children('.Switch').removeClass('Off').addClass('On');
      return $('#filter_direct').val('1');
    }
  }

But at this row:

return stop_sum += parseInt($(`#filter_stops_${$(this).attr('id').split('_')[1]}`).val());

when I try to do split I have this error.

[ts] Argument of type 'string | number | string[]' is not assignable to parameter of type 'string'. Type 'number' is not assignable to type 'string'.

How I can fix it?

Answer 1

val can return one of several types depending on the underling type of the html element. The simplest solution if you are sure this will always be a string is to use a type assertion to string

return stop_sum += parseInt($(`#filter_stops_${$(this).attr('id').split('_')[1]}`).val() as string);

Another option is to use type guards to distinguish between cases:

let value = $(`#filter_stops_${$(this).attr('id').split('_')[1]}`).val();
if (typeof value === "string") {
    return stop_sum += parseInt(value);
}
if (typeof value === "number") {
    return stop_sum += value;
} else {
    throw Error("Unsupported value type")
}