TypeScript中如何为对象属性赋值函数？附日期校验场景

首先，咱们先拆解你遇到的两个核心问题：如何正确给对象属性赋值函数，以及修正日期格式为YYYY/MM/DD的校验逻辑，同时帮你修复原代码里的几个小问题。

一、给对象属性赋值函数的正确姿势 #

你原代码里的values: this.validateDate()是直接调用了函数，把函数的返回值（这里是false或者undefined）赋值给了values，而不是把函数本身赋值过去。要赋值函数引用，你需要去掉后面的括号：

// 错误：直接调用函数，赋值的是返回值
const ValidateRuless = [{element: "date", values: this.validateDate()}];

// 正确：赋值函数本身，后续可以按需调用
const ValidateRuless = [{element: "date", values: this.validateDate}];

不过要注意this的上下文问题：如果这段代码是在类里面，this可能会因为函数调用方式丢失指向，这时候可以用箭头函数来绑定上下文，或者在构造函数里绑定：

class Validator {
  validateDate = (date: string) => {
    // 校验逻辑
  };

  ValidateRuless = [{element: "date", values: this.validateDate}];
}

如果是在普通模块（非类）中，直接去掉this即可，因为函数是顶层作用域的：

const ValidateRuless = [{element: "date", values: validateDate}];

二、修正日期格式为YYYY/MM/DD的校验逻辑 #

你原正则是校验YYYY-MM-DD格式的，要改成YYYY/MM/DD，需要把正则里的-换成转义的\/（因为/在正则表达式里是特殊字符，必须转义）。另外，你的validateDate函数只有当校验不通过时返回false，校验通过时没有返回值（默认返回undefined），这会导致逻辑异常，需要补充return true。

完整的修正代码如下：

// 修正后的日期校验函数
function validateDate(date: string): boolean {
  // 匹配YYYY/MM/DD格式的正则
  const dateRegex = /^[0-9]{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])$/;
  return dateRegex.test(date);
}

// 正确赋值函数引用的校验规则数组
const ValidateRules = [{ element: "date", values: validateDate }];

// 测试示例
console.log(validateDate("2024/05/20")); // true
console.log(validateDate("2024-05-20")); // false
console.log(validateDate("2024/13/20")); // false

额外说明 #

• 如果你的校验规则需要传递额外参数，或者需要封装更多逻辑，可以把values设为一个箭头函数，比如：

  const ValidateRules = [{
    element: "date",
    values: (input: string) => {
      // 这里可以添加更多前置逻辑，再调用校验函数
      return validateDate(input);
    }
  }];
  

• TypeScript中建议给函数和对象加上类型定义，让代码更严谨：

  type ValidationRule = {
    element: string;
    values: (input: string) => boolean;
  };
  
  const ValidateRules: ValidationRule[] = [{ element: "date", values: validateDate }];
  

内容的提问来源于stack exchange，提问作者hussain