La dernière fois que j'ai écrit un article 7 Bad Code Smells In Typescript, l'article a reçu beaucoup d'attention et d'éloges. Par conséquent, je pense que beaucoup de gens veulent en savoir plus à ce sujet et j'ai décidé d'écrire un autre article à ce sujet.

Dans cet article, je ne vais pas répéter les mauvaises odeurs de code précédentes. Aujourd'hui, nous discuterons de 5 autres concepts de code propre dans Typescript.

1. Les fonctions doivent faire une chose

Si les fonctions font plus d'une chose, elles sont plus difficiles à modifier, tester et refactoriser.

Mauvaise pratique :

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

Les énumérations peuvent vous aider à documenter l'objectif de votre code.

Mauvaise pratique :

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 vous enveloppez votre code avec un try/catch, cela signifie que vous pensez qu'il pourrait y avoir une erreur et que vous devez donc vous connecter ou faire quelque chose avec l'erreur.

Mauvaise pratique :

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 vous avez du code inutilisé, débarrassez-vous-en ! Il sera conservé dans votre historique des versions si vous en avez encore besoin.

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

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

const result = newFunction();

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

const result = newFunction();

Utilisez typesi vous avez besoin d'un unionou intersection. Utilisez un interfacesi vous avez besoin extendsou implements.

Si vous êtes intéressé, vous pouvez lire la suite Interfaces vs Types.

Mauvaise pratique :

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

On peut parler beaucoup de code propre, un article ne suffit pas. Si vous êtes intéressé, vous pouvez également en lire plus 7 Bad Code Smells In Typescript.

Merci d'avoir lu, j'espère que vous avez trouvé cet article utile. Bon codage !

Ressources