打字稿静态函数未接收参数

Question

I'm trying to reach a static function from within a Typescript object's public function, but it doesn't seem to work.

The goal is to implement an Angular-style form validator in Vue. The parent component defines an array of ReactiveFormElement objects, which are controllers for the actual form controls. These can receive two parameters upon creation: a value and an array of validators.

The validators are static functions in another object.

Here's a simplified rundown:

Parent component:

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

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

The reactive form element:

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

And the validators look like this:

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

The problem: Whatever I pass to the validator will end up being undefined . As you see, I'm printing the value I'm sending from ReactiveFormElement.validate() to Validators.require() to the console. The output is:

Sending to validator: Some string
Validator received: undefined

Why is it undefined?

It doesn't help if the validator function isn't static. It doesn't help if I use apply instead of call (putting the value into an array, of course). Interestingly the validator works if I call it from the parent component. But it refuses to work from inside ReactiveFormElement .

Answer 1

The problem is your scoping. If you pass this as a first argument to the call method (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call ) your method will receive the correct input.

Working snippet:

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