> 웹 프론트엔드 > JS 튜토리얼 > TypeScript의 결정 테이블: 더욱 깔끔한 코드를 위한 과소평가된 패턴

TypeScript의 결정 테이블: 더욱 깔끔한 코드를 위한 과소평가된 패턴

PHPz
풀어 주다: 2024-09-06 21:00:43
원래의
654명이 탐색했습니다.

Decision Tables in TypeScript: An Underrated Pattern for Cleaner Code

복잡한 소프트웨어 시스템을 구축할 때 개발자는 의사 결정 논리를 처리하기 위해 긴 if-else 또는 switch 문을 사용하는 경우가 많습니다.

이러한 접근 방식은 효과가 있을 수 있지만 조건의 수가 증가함에 따라 금방 관리하기 어려워집니다. 여기가 의사결정 테이블이 들어오는 곳입니다.

깨끗하고 유지 관리가 가능한 방식으로 복잡한 의사 결정을 단순화하는 강력하지만 잘 사용되지 않는 패턴입니다.

이 글에서는 의사결정 테이블이 무엇인지, 왜 사용해야 하는지, 복잡한 로직을 쉽게 처리하기 위해 TypeScript에서 구현하는 방법을 살펴보겠습니다.

의사결정 테이블이란 무엇입니까?

의사결정 테이블은 입력 조건의 다양한 조합을 해당 작업이나 결과에 매핑하는 구조화된 방식입니다. 각 행이 입력 변수의 고유한 조합을 나타내고 해당 열이 출력 또는 작업을 정의하는 테이블이라고 생각하면 됩니다. 이를 통해 가능한 모든 시나리오를 한 곳에서 시각화할 수 있어 관리와 이해가 더 쉬워집니다.

예를 들어, 전자상거래 플랫폼을 구축 중이고 고객 상태, 구매 내역, 사용 가능한 프로모션, 기본 언어에 따라 사용자에게 다양한 이메일 템플릿을 보내야 한다고 가정해 보겠습니다.

부울 변수 3개(isGoldCustomer, isFirstPurchase, isPromoAvailable)와 열거형 변수 1개(emailLanguage)를 사용하여 처리할 수 있는 조합은 24가지입니다.

그러나 24개의 if-else를 작성하거나 케이스를 전환하는 대신 결정 테이블이 더 깔끔한 솔루션을 제공합니다.

의사결정 테이블을 사용하는 이유는 무엇입니까?

결정 테이블은 기존 조건부 논리에 비해 몇 가지 장점을 제공합니다.

  • 가독성 향상: 하나의 표에 가능한 모든 조합이 나와 있어 한눈에 이해하기 쉽습니다.
  • 간편한 유지 관리: 중첩된 조건 줄을 뒤지는 대신 테이블의 단일 행을 업데이트하는 것만큼 논리 수정이 간단해집니다.
  • 확장성: 의사결정 테이블은 관리하기 어려워지지 않으면서 더 복잡한 의사결정 시나리오를 처리할 수 있습니다.

TypeScript에서 의사결정 테이블을 구현하는 방법을 살펴보겠습니다.

TypeScript에서 결정 테이블을 구현하는 방법

TypeScript에서 결정 테이블을 구현하는 가장 쉬운 방법은 객체 배열을 사용하는 것입니다. 각 객체는 의사결정 테이블의 행을 나타냅니다.
그런 다음 배열의 find 메소드를 사용하여 입력 변수와 일치하는 행을 찾고 해당 출력 값을 반환할 수 있습니다.

type TEmailLanguage = 'en' | 'es' | 'fr';

interface IDecisionTableRow {
  //These are the input values that determine the output value
  isGoldCustomer: boolean;
  isFirstPurchase: boolean;
  isPromoAvailable: boolean;
  emailLanguage: TEmailLanguage;

  // The last property is the output value
  template: string;
};

const DECISION_TABLE: IDecisionTableRow[] = [
  {
    isGoldCustomer: true,
    isFirstPurchase: true,
    isPromoAvailable: true,
    emailLanguage: 'en',
    template: 'welcome_en.html',
  },
  {
    isGoldCustomer: true,
    isFirstPurchase: true,
    isPromoAvailable: true,
    emailLanguage: 'es',
    template: 'welcome_es.html',
  },
  {
    isGoldCustomer: true,
    isFirstPurchase: true,
    isPromoAvailable: true,
    emailLanguage: 'fr',
    template: 'welcome_fr.html',
  },
  // more rows...
];

const getTemplate = (
  isGoldCustomer: boolean,
  isFirstPurchase: boolean,
  isPromoAvailable: boolean,
  emailLanguage: EmailLanguage
): string => {
  const row = decisionTable.find(
    (row) =>
      row.emailLanguage === emailLanguage &&
      row.isGoldCustomer === isGoldCustomer &&
      row.isFirstPurchase === isFirstPurchase &&
      row.isPromoAvailable === isPromoAvailable 
  );

  if (!row) {
    throw new Error('No matching row in decision table');
  }

  return row.template;
};
로그인 후 복사

이 예에는 의사결정 테이블을 나타내는 DECISION_TABLE이라는 객체 배열이 있습니다.
각 객체에는 입력 변수를 나타내는 4개의 속성과 출력 값을 나타내는 1개의 속성이 있습니다.

getTemplate 함수는 입력 변수를 인수로 사용하고 find 메소드를 사용하여 의사결정 테이블에서 입력 변수와 일치하는 행을 찾습니다.

행을 찾을 수 없으면 함수에서 오류가 발생합니다.

그리고 그게 다입니다! 이제 여러 입력 변수에 의존하는 복잡한 논리를 처리하는 깔끔하고 유지 관리 가능한 방법이 생겼습니다.

추가 고려 사항

  • 규칙 우선순위 지정: 여러 규칙이 입력 조건과 일치하는 경우 올바른 출력을 결정하기 위해 우선순위 메커니즘을 정의해야 할 수도 있습니다.
  • 기본값: 일치하는 규칙이 없는 경우 기본 출력 제공을 고려하세요.
  • 데이터 검증: 입력 값이 유효하고 예상 범위 내에 있는지 확인하기 위해 검증을 구현합니다.

결론

의사결정 테이블은 TypeScript에서 복잡한 의사결정 로직을 관리하는 강력하고 효과적인 접근 방식을 제공합니다. 명확하고 구조화된 규칙 표현을 제공함으로써 코드 가독성, 유지 관리성 및 확장성을 향상시킵니다. 프로젝트에 의사결정 테이블을 채택하면 코드베이스의 전반적인 품질과 효율성을 향상시킬 수 있습니다.

그러므로 다음번에 복잡한 논리를 처리하기 위해 여러 개의 if-else 문이나 switch 문을 작성하게 된다면 대신 결정 테이블을 사용해 보세요.

즐거운 코딩하세요!

위 내용은 TypeScript의 결정 테이블: 더욱 깔끔한 코드를 위한 과소평가된 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿