"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > # Reemplazar la validación genérica con funciones reutilizables

# Reemplazar la validación genérica con funciones reutilizables

Publicado el 2024-11-06
Navegar:713

# Replace Generic Validation with Reusable Functions

Los desarrolladores de JavaScript y TypeScript a menudo se encuentran escribiendo las mismas condiciones repetidamente. Si es desarrollador web, probablemente haya encontrado un código como este:

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}

En este caso, event.key es de tipo cadena y es fácil introducir errores al incluir accidentalmente un espacio en 'Intro', por ejemplo.

¿Por qué no encapsular esta condición en una función?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}

Esto garantiza que todas las comprobaciones de la tecla Intro sean coherentes y fiables.

Ahora, considere esta validación:

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}

Aunque TypeScript es inteligente, el valor dentro de la condición sigue siendo del tipo Valor. Esto se debe a que typeof null devuelve 'objeto'.

Entonces, debes escribir:

if (value !== null && typeof value === 'object') {
  value; // value type is object
}

Es posible que muchos desarrolladores no encapsulen esto en una función y, en cambio, lo escriban repetidamente cada vez que se encuentren con esta situación.

¿Cuántas veces has escrito la misma condición en tu vida?

¿Cuántas veces has cometido el mismo error?

¿Cuántas veces más escribirás la misma condición en el futuro?

Si fuera yo, haría esto:

if (checkIsObject(value)) {
  value; // value type is object
}

Encapsular condiciones genéricas en funciones tiene muchos beneficios.

Considere el siguiente ejemplo:

const array = [0, 1, 2, 3, 4, 5, null, undefined];

Creemos una matriz que excluya solo los valores nulos.

Puedes priorizar la brevedad y escribirlo así:

const numbers = array.filter(Boolean);

Desafortunadamente, esto no es lo ideal. 0 también se evalúa como falso y se excluye. Entonces necesitas escribir:

const numbers = array.filter(item => item !== null && item !== undefined);

¿No te parece un código feo y no reutilizable?

Puedo escribir código más elegante:

const numbers = array.filter(checkIsNullish);

Dejar de escribir condiciones genéricas repetidamente. Solo genera errores y el código se vuelve menos legible.

Permítanme presentarles una biblioteca que creé llamada checker.

Esta biblioteca de funciones de utilidad representa condiciones de uso común en el desarrollo web general y el desarrollo de bajo nivel como funciones. Todas las funciones toman una entrada y devuelven un valor booleano.

Al momento de escribir este artículo, proporciona una gran cantidad de funciones para manejar tipos de datos como cadenas, números, booleanos y valores nulos. Todas las funciones están probadas, documentadas y son fáciles de comenzar a usar.

Veamos algunos ejemplos del mundo real.

Todos los paquetes proporcionados por esta biblioteca están publicados en JSR. Se pueden instalar fácilmente en proyectos NPM, PNPM, Yarn, Bun y Deno.

Aquí tomaremos el paquete @checker/string como ejemplo con NPM.

  1. Instalar el paquete

Ejecute el siguiente comando en el directorio de su proyecto:

  npx jsr add @checker/string
  1. Usando las funciones
  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }

No me gusta usar operadores de negación lógica como !SOME_CONDITION para invertir un valor booleano. Esto se debe a que está implícito y simplemente invertir el valor booleano agregándolo u omitiéndolo puede generar muchas situaciones peligrosas.

Por lo tanto, todas las funciones tienen definidas las funciones checkIsNot~ correspondientes.

Encapsular condiciones genéricas en funciones. De esta manera, el código se vuelve más legible y los errores son más fáciles de detectar.

Gracias por leer.

Declaración de liberación Este artículo se reproduce en: https://dev.to/cat394/-replace-generic-validation-with-reusable-functions-3nec?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3