Búsqueda de sitios web

Jquery y Typescript [ts] El argumento de tipo 'string | number | string[]' no se puede asignar al parámetro de tipo 'string'


Tengo un proyecto grande existente que se está convirtiendo a TypeScript y que eventualmente será refactorizado y luego puesto en Angular. El proyecto actual tiene mucho jQuery en él. Tengo un @types implementado en el proyecto.

El problema es que esta línea

if (["Priority", "PM"].indexOf($('option:selected', this).val()) >= 0) {

está creando un error debido a las definiciones de tipo. Obtengo [TS] Argument of type 'string | number | string[]' is not assignable to parameter of type 'string'. Porque indexOf está definido como "(method) Array.indexOf(searchElement: string, fromIndex?: number): number" y el .val de Jquery está definido como "JQuery.val(): string | number | string[] (+1 overload)".

Necesito una manera de sobrescribir la definición de .val, solo a string, para poder hacer que compile, para líneas como esta sin sobrescribir .val para todo el proyecto. Tengo muchas líneas que son así en el proyecto, así que aún no puedo reescribir todas. Eventualmente nos desharemos de Jquery por completo. Si alguien puede indicarme la dirección correcta, eso sería genial.

Respuesta #1

Finalmente descubrí cómo hacerlo funcionar. Pude convertir el tipo string a eso. Como tenía esa misma línea en varios lugares del proyecto, creé una variable así:

let optSel: string = <string>$('option:selected', this).val();

if ($(["Priority", "PM"]).index(optSel) >= 0) {

Esto me permitió asegurarme de que el tipo .val era una cadena que coincidía con el requisito de indexOf de Array.indexOf(searchElement: string). Espero que esto ayude a alguien.

Respuesta #2

Tu enfoque actual es una solución válida, pero eso requeriría que conviertas todas las ocurrencias de $ ('option:selected').val() al tipo esperado de string. Algo que podrías considerar es hacer uso de declaraciones ambientales en las que sobrescribas/extiendas la interfaz JqueryStatic en @types/jquery.

interface JQueryStatic {
    (opts: 'option:selected', ...args): {
        val: () => string;
    };
}

Siempre que se llame a $ ('option:selected', ...), la definición de esta llamada insistirá en que el objeto devuelto contenga un método val que devuelva un valor de cadena.

let value: string = $('option:selected').val();

Si usas esto a lo largo de tu proyecto en varios archivos, puedes crear un archivo de declaración (*d.ts) para ello, de lo contrario, sugeriría simplemente añadir la declaración de tipo ambiental en la parte superior de tu archivo actual.

Artículos relacionados