Das letzte Mal, als ich einen Artikel geschrieben habe 7 Bad Code Smells In Typescript, erhielt der Artikel viel Aufmerksamkeit und Lob. Daher denke ich, dass viele Leute mehr darüber wissen wollen und ich habe beschlossen, einen weiteren Artikel darüber zu schreiben.

In diesem Artikel werde ich frühere Gerüche von schlechtem Code nicht wiederholen. Heute werden wir weitere 5 Clean-Code-Konzepte in Typescript besprechen.

1. Funktionen sollten eine Sache tun

Wenn Funktionen mehr als eine Sache tun, sind sie schwieriger zu ändern, zu testen und umzugestalten.

Schlechte Praxis:

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

Enums können Ihnen dabei helfen, den Zweck Ihres Codes zu dokumentieren.

Schlechte Praxis:

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

Wenn Sie Ihren Code mit try/catch umschließen, bedeutet dies, dass Sie glauben, dass ein Fehler vorliegen könnte, und Sie daher den Fehler protokollieren oder etwas dagegen unternehmen sollten.

Schlechte Praxis:

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

Wenn Sie unbenutzten Code haben, werden Sie ihn los! Es wird in Ihrem Versionsverlauf aufbewahrt, wenn Sie es noch benötigen.

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

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

const result = newFunction();

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

const result = newFunction();

Verwenden Sie , wenn Sie ein oder typebenötigen . Verwenden Sie bei Bedarf oder .unionintersectioninterfaceextendsimplements

Wenn Sie interessiert sind, können Sie mehr lesen Interfaces vs Types.

Schlechte Praxis:

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

Wir können viel über sauberen Code reden, ein Artikel reicht nicht aus. Wenn Sie interessiert sind, können Sie auch mehr lesen 7 Bad Code Smells In Typescript.

Danke fürs Lesen, ich hoffe, Sie fanden dieses Stück nützlich. Viel Spaß beim Codieren!

Ressourcen