5 concetti di codice pulito in TypeScript

Mar 30 2023
Come scrivere codice super leggibile
L'ultima volta che ho scritto un articolo 7 Bad Code Smells In Typescript, l'articolo ha ricevuto molta attenzione e lode. Pertanto, penso che molte persone vogliano saperne di più e ho deciso di scrivere un altro pezzo a riguardo.
Foto di Daniel K Cheung su Unsplash

L'ultima volta che ho scritto un articolo 7 Bad Code Smells In Typescript, l'articolo ha ricevuto molta attenzione e lode. Pertanto, penso che molte persone vogliano saperne di più e ho deciso di scrivere un altro pezzo a riguardo.

In questo articolo, non ripeterò i precedenti cattivi odori di codice. Oggi discuteremo altri 5 concetti di codice pulito in Typescript.

1. Le funzioni dovrebbero fare una cosa

Se le funzioni fanno più di una cosa, sono più difficili da modificare, testare e refactoring.

Cattiva pratica:

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();
}

Gli enum possono aiutarti a documentare lo scopo del tuo codice.

Cattiva pratica:

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
    }
  }
}

Se avvolgi il tuo codice con un try/catch, significa che pensi che potrebbe esserci un errore e quindi dovresti registrare o fare qualcosa con l'errore.

Cattiva pratica:

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);
}

Se hai un codice inutilizzato, sbarazzartene! Verrà conservato nella cronologia delle versioni se ne avrai ancora bisogno.

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

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

const result = newFunction();

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

const result = newFunction();

Usa typese hai bisogno di un uniono intersection. Usa un interfacese hai bisogno extendso implements.

Se sei interessato, puoi leggere di più Interfaces vs Types.

Cattiva pratica:

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 {
  // ...
}

Possiamo parlare molto di codice pulito, un articolo non è sufficiente. Se sei interessato, puoi anche leggere di più 7 Bad Code Smells In Typescript.

Grazie per aver letto, spero che tu abbia trovato utile questo pezzo. Buona programmazione!

Risorse