Свойство toLowerCase не существует в строке типа | номер | строка [] '. Свойство toLowerCase не существует для типа number

Question

Я работаю над проектом Laravel (с Laravel Mix) в данный момент. Я пытаюсь создать таблицу с возможностью фильтрации. Но когда я помещаю этот код в свой файл TS

import $ from 'jquery';
import 'bootstrap';

$(() => {
    if ( $('#documents-view').length > 0 ) {
        $("#myInput").on("keyup", function() {
            var value = $('in').val().toLowerCase();
            $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    }
});

, я получаю следующие две ошибки:

TS2339: Property 'toLowerCase' does not exist on type 'string | number | string[]'.   Property 'toLowerCase' does not exist on type 'number'.

и

TS2345: Argument of type '(this: HTMLElement) => void' is not assignable to parameter of type 'string | Element | JQuery<HTMLElement> | Element[] | ((this: HTMLElement, index: number, element: HTMLElement) => boolean)'.   Type '(this: HTMLElement) => void' is not assignable to type '(this: HTMLElement, index: number, element: HTMLElement) => boolean'.     Type 'void' is not assignable to type 'boolean'.

Это мой интерфейс - код с таблицей внутри:

@extends('client-portal::layouts.default')
@section('content')
    <div id="documents-view" class="clients">
        <div class="clients-top">
            <div class="clients-top__logo">
                <img class="clients-top__image" src="{{ asset('vendor/client-portal/images/logo_CRVS.png') }}">
            </div>
            <div class="clients-top__title">Klantportaal</div>
        </div>
        @include('client-portal::navbar')
        <div class="clients-content">
            <div class="col-md-20 offset-md-1 p-3 p-md-5">
                <div class="container-fluid">
                    <div class="row">
                        <a class="btn btn-primary mb-3 border-white" href="#">
                            {{ __('Document toevoegen') }}
                        </a>
                        <input class="form-control mb-2" id="myInput" type="text" placeholder="Zoeken..">
                        @if($documents->isEmpty())
                            <p>Er zijn geen documenten bij ons bekend.</p>
                        @else
                            <table class="table table-striped table-bordered bg-white" style="width:100%">
                                <thead>
                                <tr>
                                    @foreach($data['documents'] as $document)
                                        <th>{{$document['name']}}</th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody id="myTable">
                                @foreach($documents as $document)
                                    <tr>
                                        @foreach($document as $key => $item)
                                            @foreach($data['documents'] as $keyConfig => $reg)
                                                @if($key === $keyConfig)
                                                    <td>{{$item}}</td>
                                                @endif
                                            @endforeach
                                        @endforeach
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                <tr>
                                    @foreach($data['documents'] as $document)
                                        <th>{{$document['name']}}</th>
                                    @endforeach
                                </tr>
                                </tfoot>
                            </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

Я действительно не знаю, что здесь не так, может ли кто-нибудь помочь мне с этим?

Answer 1

В jQuery val() reutnn string | number | string[] | undefined; типов. Поэтому вам нужно добавить проверки на тип. Например:

var v = $('in').val();
var defaultValue = '';
var value = typeof v === 'string' ? v.toLowerCase() : defaultValue;

А в функции фильтра требуется больше параметров и, что более важно, возвращаемое значение (вы его пропустили).

Но, судя по вашему коду, похоже, что вы этого не делаете t нужна функция фильтра, но для каждого.

$("#myTable tr").forEach(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});