Causas y soluciones a errores de compilación al usar funciones de flecha + ts para definir funciones genéricas

Primero, cuando usamos function+ts para definir una función, de la siguiente manera:

// 根据某个字段给数组排序
function sortArray<T> (arr: T[], field: keyof T): T[] {
  return arr.sort((a, b) => {
    if (a[field] > b[field]) {
      return -1
    }
    if (a[field] < b[field]) {
      return 1
    }
    return 0
  })
}

Esta forma de escribir se compila normalmente.

Al cambiarlo a una función de flecha, el código se ve así:

const sortArray = <T>(arr: T[], field: keyof T): T[] => {
  return arr.sort((a, b) => {
    if (a[field] > b[field]) {
      return -1
    }
    if (a[field] < b[field]) {
      return 1
    }
    return 0
  })
}

Al utilizar este método de escritura, se informará el siguiente error durante el proceso de compilación:

        “ error Error de análisis: token inesperado. ¿Quiso decir `{'>'}` o `>`? "

Razones del error anterior:

        En algunos casos, el uso de corchetes angulares (<>) para indicar genéricos se analizará como etiquetas JSX.

Hay varias soluciones de la siguiente manera (se recomienda la primera):

        El primero: agregue un "(,)" después del genérico en <>, para que no se analice en una etiqueta jsx durante el análisis. El código es el siguiente:

const sortArray = <T, >(arr: T[], field: keyof T): T[] => {
    return T[]
}

        Segundo tipo: reescriba usando la palabra clave extends, el código es el siguiente:

const sortTable = <T extends {}>(arr: T[], field: keyof T): T[] => {
    return T[]
}

        El tercer método: reescribe el método de definición de tipo, el código es el siguiente:

const sortTable:<T>(arr: T[], field: keyof T) => T[] = (arr, field) => {
    return T[]
}

Conclusión: Al definir tipos para ts, a menudo me encuentro con algunos problemas que no conozco, al consultar la información y combinar mi propia experiencia de desarrollo, finalmente los resolví perfectamente.

El contenido anterior es original del autor. Si hay algún error, indíquelo en el área de comentarios. ¡Muchas gracias! Adjunte un enlace al reimprimir.

Cualquier similitud en el contenido es pura coincidencia.