Hace un tiempo, vimos en el segundo artículo sobre Clean Code, que una de las cosas más importantes que podemos hacer es pensar detenidamente en la nomenclatura. Unos nombres claros de funciones, variables y demás elementos, que revelen intencionalidad y significado, son clave para un código limpio y mantenible. Y los tipos no son una excepción. Muchas veces desarrollando en TypeScript me he planteado cómo llamar a algún tipo, así que aquí van algunas reglas de Matt Pocock, experto en la materia.
Regla 1: Nunca pluralizar
Imagina que tienes una empresa de alquiler de coches y estás construyendo una aplicación para gestionar los alquileres. Tienes un tipo con las marcas de coches que tienes disponibles. La primera opción que viene a la mente es hacer lo siguiente:
type Marcas = "Audi" | "Dacia" | "Mercedes"Ahora necesitas una función que obtenga los modelos disponibles para cierta marca. Entonces en tu función tendrías esto:
const getModelo = (marca: Marcas) => {
return ...
}Como puedes observar, esperas una sola marca pero el tipo es Marcas, lo cuál lo hace confuso. Imagina además que necesitas crear un array de Marcas, si hacemos lo que vemos a continuación, no queda claro si cada marca es además una array en sí misma, porque está en plural.
const MARCAS_BARATAS: Marcas[] = []La manera correcta de abordarlo es utilizar el singular para el nombre del tipo, así todo lo demás tendrá más coherencia. Veamos cómo quedaría.
type Marca = "Audi" | "Dacia" | "Mercedes"
getModelo = (marca: Marca) => {
}
const MARCAS_BARATAS: Marca[] = []
// Incluso podemos crear otro tipo que sea un array y usar el plural ahí
type Marcas = Marca[]En resumen, asegúrate de que todo es singular, excepto los arrays.
Regla 2: Utiliza distinta notación entre variables y tipos
Por norma general, lo correcto es que el tipo tenga la primera letra en mayúscula y que el nombre de la variable comience con minúscula. No hay nada que te impida utilizar exactamente la misma notación, pero ten en cuenta que el IDE puede confundirse a la hora de colorear, etc. y hacer que nuestra experiencia de desarrollo sea peor. Veámoslo con un ejemplo del vídeo de Matt.
Se puede observar que Visual Studio Code no se queja, de hecho en la función hasta se ve correctamente. Pero en la segunda línea, cuando creas una variable con el mismo nombre que el tipo, pinta ambas de verde, lo cuál nos complica la existencia. Si utilizas mayúsculas, no obstante, obtendrás mejores resultados visuales y mejorarás la DX.
Regla 3: Nombra a los genéricos con el prefijo T
Cuando tenemos un tipo simple, la convención para el genérico es usar la letra T. Si el tipo contiene más genéricos, se suelen utilizar las siguientes letras del abecedario U, V… Pero el código será mucho más entendible si utilizamos siempre T y especificamos a continuación qué función hace ese genérico. Veámoslo con el ejemplo utilizado en el vídeo.
// Tipo simple, podemos usar T
export type Response<T> = {
data: T;
error: Error
}
// Tipo más complejo, el error también es genérico
// Forma incorrecta ❌
export type Response<T, U> = {
data: T;
error: U
}
// Forma correcta ✅
export type Response<TData, TError> = {
data: TData;
error: TError;
}Regla 4: Evitar prefijos en los nombres de tipos no genéricos
No utilicéis la T para el prefijo de los tipos ni la I como prefijo de interfaces. Volviendo al primer ejemplo, debemos evitar llamar al tipo TMarcas. En caso de hacerlo, si en un futuro queremos que sea una interfaz, por ejemplo, habrá que hacer este cambio en todos los sitios donde se utilice. Además, podemos obtener esta información simplemente dejando el ratón encima un par de segundos.
Si queréis ver el vídeo original en inglés, click aquí.