打字稿静态函数没有接收参数

Posted 2023-02-22

【中文标题】打字稿静态函数没有接收参数

【英文标题】：Typescript static function isn't receiving arguments

【发布时间】：2020-12-15 14:05:00

【问题描述】：

我试图从 Typescript 对象的公共函数中访问静态函数，但它似乎不起作用。

目标是在 Vue 中实现一个 Angular 风格的表单验证器。父组件定义了一个ReactiveFormElement 对象数组，它们是实际表单控件的控制器。它们在创建时可以接收两个参数：一个值和一个验证器数组。

验证器是另一个对象中的静态函数。

这是一个简化的纲要：

父组件：

import ReactiveFormElement from '@/components/ReactiveFormElement';
import Validators from '@/services/validators';
...

    public formData = 
        title: new ReactiveFormElement('', [Validators.required]),
    ;

反应式表单元素：

export default class ReactiveFormElement 

    constructor(
        public value?: any,
        public validators: Function[] = [])  

    public validate() 
        console.log('Sending to validator: ' + this.value);
        const error = validator.call(this.value);
    

验证器如下所示：

export default class Validators 

    static required(value: any) 
        console.log('Validator received: ', value);
        if (typeof value === 'undefined' || !value)
            return 'This value is required'
        else
            return null;
    

问题：我传递给验证器的任何内容最终都会成为undefined。如您所见，我正在打印从ReactiveFormElement.validate() 到Validators.require() 发送到控制台的值。输出是：

Sending to validator: Some string
Validator received: undefined

为什么未定义？

如果验证器函数不是静态的，它也无济于事。 如果我使用 apply 而不是 call （当然，将值放入数组中），这将无济于事。 有趣的是，如果我从父组件调用验证器，它就可以工作。但它拒绝在 ReactiveFormElement 内部工作。

【问题讨论】：

你为什么使用.call？

字面意思是因为为什么不呢？

开个玩笑吧？这就是您的代码不起作用并且您没有做任何需要它的事情的原因。

为什么不呢？ call() 没有任何问题，它现在工作得很好。查看两个答案。

【参考方案1】：

问题在于您的范围。如果您将this 作为第一个参数传递给调用方法（请参阅https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Function/call），您的方法将收到正确的输入。

工作sn-p：

class ReactiveFormElement 

    constructor(
        public value?: any,
        public validators: Function[] = [])  

    public validate() 
        console.log('Sending to validator: ' + this.value);
        this.validators.forEach(validator =>
            validator.call(this, this.value));
    


class Validators 

    static required(value: any) 
        console.log('Validator received: ', value);
        if (typeof value === 'undefined' || !value)
            return 'This value is required'
        else
            return null;
    


const formElement = new ReactiveFormElement('foo', [Validators.required]);
formElement.validate();