如何有效地重构打字稿中的 if...if 语句

Question

作为练习，我正在尝试找到最有效的方法来重构此事，如果... if语句。

这是原始代码：

interface Validatable {
  value: string | number;
  required?: boolean;
  minLength?: number;
  maxLength?: number;
  min?: number;
  max?: number;
}

function validate(validatableInput: Validatable) {
  let isValid = true;
  if (validatableInput.required) {
    isValid = isValid && validatableInput.value.toString().trim().length !== 0;
  }
  if (
    validatableInput.minLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length >= validatableInput.minLength;
  }
  if (
    validatableInput.maxLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length <= validatableInput.maxLength;
  }
  if (
    validatableInput.min != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value >= validatableInput.min;
  }
  if (
    validatableInput.max != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value <= validatableInput.max;
  }
  return isValid;
}

到目前为止，这就是我所取得的成就：

function validate(validatableInput: Validatable) {
  const { required, minLength, maxLength, min, max } = validatableInput; // This methos extracts the properties from the object
  const validatableInputValue = validatableInput.value;
  let isValid = true;

  if (required) {
    isValid = isValid && validatableInputValue.toString().trim().length !== 0;
  }
  if (minLength != null && typeof validatableInputValue === "string") {
    isValid = isValid && validatableInputValue.length >= minLength;
  }
  if (maxLength != null && typeof validatableInputValue === "string") {
    isValid = isValid && validatableInputValue.length <= maxLength;
  }
  if (min != null && typeof validatableInputValue === "number") {
    isValid = isValid && validatableInputValue >= min;
  }
  if (max != null && typeof validatableInputValue === "number") {
    isValid = isValid && validatableInputValue <= max;
  }
  return isValid;
}

我还能做什么？喜欢使用开关语句，还是其他？谢谢你！

Answer 1

所有条件都遵循一种模式：如果满足特定先决条件，则根据某些内容验证输入值。您可以通过创建此类条件的数组来利用这一点：每个项目都可以有一个先决条件（例如 required）和一个测试（例如 value.toString().trim().length != = 0）。然后使用 .every 之类的内容迭代数组，以检查每个真实的先决条件是否满足其相应的条件。

function validate(validatableInput: Validatable) {
    const { required, minLength, maxLength, min, max, value } = validatableInput;
    const isStr = typeof value === "string";
    const isNum = typeof value === "number";
    const conditions = [
        [required, value.toString().trim().length !== 0],
        [minLength != null && isStr, value.length >= minLength],
        [maxLength != null && isStr, value.length <= maxLength],
        [min != null && isNum, value >= min],
        [max != null && isNum, value <= max],
    ];
    return conditions.every(([prereq, result]) => result || !prereq);
}

Answer 2

作为保持现有结构的另一种方法：

function validate(validatableInput: Validatable) {
  const { value, required, minLength, maxLength, min, max } = validatableInput;

  if (required && value.toString().trim().length === 0) {
    return false;
  }

  if (typeof value !== "string" || typeof value !== "number") {
    return true
  }

  if (typeof value === "string") {
    if (minLength && value.length < minLength) {
      return false;
    }

    if (maxLength && value.length > maxLength) {
      return false;
    }
  }
  
  if (min && value < min) {
    return false;
  }

  if (max && value > max) {
    return false;
  }

  return true;
}

一些值得注意的事情：

• 有些人在提前回报方面存在问题；我不知道——在阅读发生的事情时就可以立即清楚，而无需继续阅读该函数。
• 它不像 every 选项那么优雅，但它允许更轻松的修改、日志记录等，因为它非常明确并且被屏蔽。
• 由于 Validatable 是一种类型，我不确定为什么要从中提取此功能，特别是因为决策是根据 Validatable 属性的类型信息做出的。