5 khái niệm Clean Code trong TypeScript

Mar 30 2023
Cách viết mã siêu dễ đọc
Lần cuối cùng tôi viết một bài báo 7 Bad Code Smells In Typescript, bài báo đã nhận được rất nhiều sự chú ý và khen ngợi. Vì vậy, tôi nghĩ rằng nhiều người muốn biết thêm về điều này và tôi quyết định viết một bài khác về nó.
Ảnh của Daniel K Cheung trên Bapt

Lần cuối cùng tôi viết một bài báo 7 Bad Code Smells In Typescript, bài báo đã nhận được rất nhiều sự quan tâm và khen ngợi. Vì vậy, tôi nghĩ rằng nhiều người muốn biết thêm về điều này và tôi quyết định viết một bài khác về nó.

Trong bài viết này, tôi sẽ không lặp lại những đoạn code dở tệ trước đây. Hôm nay chúng ta sẽ thảo luận về 5 khái niệm mã sạch khác trong Typescript.

1. Các chức năng nên làm một việc

Nếu các chức năng làm nhiều hơn một việc, chúng sẽ khó thay đổi, kiểm tra và tái cấu trúc hơn.

Thực hành xấu:

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 có thể giúp bạn ghi lại mục đích mã của bạn.

Thực hành xấu:

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

Nếu bạn bọc mã của mình bằng một lần thử/bắt, điều đó có nghĩa là bạn cho rằng có thể có lỗi và do đó bạn nên ghi nhật ký hoặc làm điều gì đó với lỗi đó.

Thực hành xấu:

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

Nếu bạn có mã không sử dụng, hãy loại bỏ nó! Nó sẽ được lưu trong lịch sử phiên bản của bạn nếu bạn vẫn cần nó.

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

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

const result = newFunction();

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

const result = newFunction();

Sử dụng typenếu bạn cần một unionhoặc intersection. Sử dụng interfacenếu bạn cần extendshoặc implements.

Nếu bạn quan tâm, bạn có thể đọc thêm Interfaces vs Types.

Thực hành xấu:

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

Chúng ta có thể nói rất nhiều về mã sạch, một bài viết là không đủ. Nếu bạn quan tâm, bạn cũng có thể đọc thêm 7 Bad Code Smells In Typescript.

Cảm ơn đã đọc, tôi hy vọng bạn tìm thấy phần này hữu ích. Chúc mừng mã hóa!

Tài nguyên