5 conceptos de código limpio en TypeScript

Mar 30 2023
Cómo escribir código súper legible
La última vez que escribí un artículo 7 Bad Code Smells In Typescript, el artículo recibió mucha atención y elogios. Por lo tanto, creo que muchas personas quieren saber más sobre esto y decidí escribir otro artículo al respecto.
Foto de Daniel K Cheung en Unsplash

La última vez que escribí un artículo 7 Bad Code Smells In Typescript, el artículo recibió mucha atención y elogios. Por lo tanto, creo que muchas personas quieren saber más sobre esto y decidí escribir otro artículo al respecto.

En este artículo, no voy a repetir malos olores de código anteriores. Hoy discutiremos otros 5 conceptos de código limpio en Typescript.

1. Las funciones deben hacer una cosa

Si las funciones hacen más de una cosa, son más difíciles de cambiar, probar y refactorizar.

Mala práctica:

function updateDeprecatedDependencies(dependicies: Dependency[]) {
  dependicies.forEach((dependency) => {
    const dependencyVersion = getDependencyVersion(dependency);
    if (dependencyVersion.isDeprecated()) {
      upgradeDependency(dependency);
    }
  })
}

function updateDeprecatedDependencies(dependicies: Dependency[]) {
  dependicies.filter(isDeprecatedDependency).forEach(upgradeDependency);
}

function isDeprecatedDependency(dependency: Dependency) {
  const dependencyVersion = getDependencyVersion(dependency);
  return dependencyVersion.isDeprecated();
}

Las enumeraciones pueden ayudarlo a documentar el propósito de su código.

Mala práctica:

const MOBILE_OS= {
  ANDROID: 'android',
  IOS: 'iOS',
}

reactNative.run(MOBILE_OS.ANDROID);

class ReactNative {
  // declaration of React Native
  run(mobileOS) {
    switch (mobileOS) {
      case MOBILE.ANDROID:
        // some logic to be executed 
      case MOBILE.IOS:
        // some logic to be executed
    }
  }
}

enum MOBILE_OS {
  ANDROID,
  IOS,
}

reactNative.run(MOBILE_OS.ANDROID);

class ReactNative {
  // declaration of ReactNative
  run(mobileOS) {
    switch (mobileOS) {
      case MOBILE.ANDROID:
        // some logic to be executed 
      case MOBILE.IOS:
        // some logic to be executed
    }
  }
}

Si ajusta su código con un intento/captura, significa que cree que puede haber un error y, por lo tanto, debe iniciar sesión o hacer algo con el error.

Mala práctica:

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

// or even worse

try {
  functionThatMightThrow();
} catch (error) {
  // ignore error
}

import { logger } from './logging'

try {
  functionThatMightThrow();
} catch (error) {
  logger.log(error);
}

Si tiene código sin usar, ¡deshágase de él! Se mantendrá en su historial de versiones si aún lo necesita.

function unusedFunction(param: string) {
  // ...
}

function newFunction(param: string) {
  // ...
}

const result = newFunction();

function newFunction(param: string) {
  // ...
}

const result = newFunction();

Úselo typesi necesita un uniono intersection. Use un interfacesi necesita extendso implements.

Si estás interesado, puedes leer más Interfaces vs Types.

Mala práctica:

interface FrontendConfig {
  // ...
}

interface BackendConfig {
  // ...
}

interface Config {
  // ...
}

//...

type Settings = {
  // ...
}


type FrontendConfig = {
  // ...
}

type BackendConfig = {
  // ...
}

type Config  = FrontendConfig | BackendConfig;

// ...

interface Settings {
  // ...
}

class FrontendSettings implements Settings {
  // ...
}

class BackendSettings implements Settings {
  // ...
}

Podemos hablar mucho sobre código limpio, un artículo no es suficiente. Si te interesa, también puedes leer más 7 Bad Code Smells In Typescript.

Gracias por leer, espero que hayas encontrado útil esta pieza. ¡Feliz codificación!

Recursos