Function type setting 'this' context, not working

Question

I have the following code in my Vue component:

import Vue from 'vue';
import { ElForm } from 'element-ui/types/form';

type Validator = (
  this: typeof PasswordReset,
  rule: any,
  value: any,
  callback: (error?: Error) => void
) => void;

const validatePass1: Validator = (rule, value, callback) => {
  if (value && this.form.passwordConfirm) {
    (this.$refs.form as ElForm).validateField('passwordConfirm', valid => {});
  }
};
// ...

const PasswordReset = Vue.extend({
  // ...

This is not working as documented. I get a type error in the validatePass1 func:

'this' implicitly has type 'any' because it does not have a type annotation.

I don't understand why this isn't working.

Matt McCutchen · Accepted Answer · 2018-07-26 18:14:16Z

1

validatePass1 needs to be defined with the function keyword instead of as an arrow function. An arrow function ignores the this passed at the time of the call (which is what your type annotation is on) and always uses the this from where it was defined, which in this case is the global object (I think).

answered Jul 26, 2018 at 18:14

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ffxsam Over a year ago

That could be true. But I can't figure out how to define a function and set its type at the same time.

Matt McCutchen Over a year ago

const validatePass1: Validator = function(rule, value, callback) { ... } should work.

ffxsam Over a year ago

Oops, duh. Brain fart. Lemme try that.

ffxsam Over a year ago

Got it! I've been staring at TS failures too long. :)

Collectives™ on Stack Overflow

Function type setting 'this' context, not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related