Quiero escribir una función que tome como entradas:
En JavaScript, lo siguiente funciona como se esperaba:
const myFilter = (func, arr) => arr.filter(func) const myArr = [1, 2, 3, 4, 5, 6] const res = myFilter(x => x > 3, myArr) console.log(res) // => [ 4, 5, 6 ]Sin embargo, en TypeScript arroja un error:
const myFilter = (func: Function, arr: any[]): any[] => arr.filter(func) // ^ // (parameter) func: Function // No overload matches this call. Aunque escribir func as any resuelve el error, todavía quiero saber:
Function no funciona?func ?Function se refiere a la clase de función js utilizada para crear funciones a partir de una cadena.
En su lugar, utilice la siguiente sintaxis: func: (current: T, i: number, arr: T[]) => boolean . Este tipo crea un tipo de devolución de llamada que acepta Array.prototype.filter , ya que imita sus parámetros y el tipo de devolución.
Usando genéricos puede tener una función HOF que acepte cualquier tipo:
function myFilter<T>(func: (current: T, i: number, arr: T[]) => boolean, arr: T[]): T[] { return arr.filter(func); } console.log(myFilter((v) => v % 2 === 0, [1, 2, 3, 4, 5, 6])); Si no desea utilizar genéricos y restringir la función a un tipo específico, simplemente elimine <T> y reemplace T con el tipo deseado.
Con genérico puede escribir, mire la func del segundo parámetro definida como una devolución de llamada. Array<T> : esto se conoce como tipo genérico, donde T es el tipo genérico proporcionado al llamar a la función, lo que proporcione se convertiría en T. Sp podría ser un número, una cadena o un entero como ese, si pasa el número que su ejemplo está enviando T sería el número te.
const myFilter = <T,>(arr: Array<T>, func: (value: T) => any) => { return arr.filter(func); } const myArr = [1, 2, 3, 4, 5, 6]; const res = myFilter(myArr, x => x > 3); console.log(res);Incluso puede restringir el tipo de esta manera. Entonces ahora tendrá que pasar siempre una matriz de números pero nada más.
const myFilter = <T extends number>(arr: Array<T>, func: (value: T) => any) => { return arr.filter(func) }Con su pregunta específica sin usar genérico, puede escribirse simplemente así,
const myFilter = (arr: Array<any>, func: (value: number) => any) => { return arr.filter(func) } const myArr = [1, 2, 3, 4, 5, 6] const res = myFilter(myArr, x => x > 3) console.log(res);Para maximizar la utilidad de su función, puede escribir múltiples sobrecargas :
array.filterAl escribir una sobrecarga para la versión de protección de tipo, puede inferir el tipo protegido en el predicado y obtener una matriz reducida en el caso de que la matriz/tupla original sea homogénea (consulte el ejemplo 2).
type ArrayItemPredicate<U, T extends U> = ( value: U, index: number, array: readonly U[], ) => value is T; function myFilter <U, T extends U, A extends readonly U[]>( arr: A, filterPredicate: ArrayItemPredicate<U, T>, ): T[]; function myFilter <A extends readonly unknown[]>( arr: A, filterPredicate: Parameters<A['filter']>[0], ): A[number][]; function myFilter < U, T extends U, A extends readonly U[], Predicate extends ArrayItemPredicate<U, T> | Parameters<A['filter']>[0], >(arr: A, filterPredicate: Predicate) { return arr.filter(filterPredicate); } { // example 1: from your question const arr = [1, 2, 3, 4, 5, 6]; const predicate = (n: number) => n > 3; const res = myFilter(arr, predicate); // number[] console.log(res); // [4, 5, 6] } { // example 2: filter to keep only numbers const arr = [1, 'a', 2, 'b', 3, 4, 'c', 'd', 'e', 'f', 5, 6]; const predicate = (value: string | number): value is number => typeof value === 'number'; const res = myFilter(arr, predicate); // number[] console.log(res); // [1, 2, 3, 4, 5, 6] }