TypeScript and third-party libraries

OK, I have to tell it again: TypeScript isn’t easy, but it’s quite useful.

I want to share a tip about using VeeValidate library with TypeScript.

In the Masterclass of VueSchool.io, I used the @invalid-submit and in the custom function signature, I needed to type the input argument.

How did I find what to set?

I hovered the emit on the VeeForm component and it gave me this:

The code of my method then reads as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const handleErrors = (
  context: InvalidSubmissionContext<GenericObject> | undefined
) => {
  if (context === undefined) return;

  const { erreurs, résultats } =
    context as InvalidSubmissionContext<GenericObject>;
  console.log("UserRegister>handleErrors>errors", errors);
  console.log("UserRegister>handleErrors>results", results);
};

So here you have it: this is how you can type your method that depends on a third-party library.