TypeScript Support

A static type system can help prevent many potential runtime errors as applications grow, which is why vue-formily is written in TypeScript.

Editor Support

We strongly recommend using Visual Studio Code, which provides great out-of-the-box support for TypeScript.

WebStorm also provides out-of-the-box support for both TypeScript and Vue.

Define Schemas

To let TypeScript properly infer types inside form element options, you need to define schemas with defineSchema global method:

import { defineSchema } from '@vue-formily/formily';

const loginForm = defineSchema({
  formId: 'login',
  group: {
    fields: [
      {
        formId: 'email',
        rules: [
          required,
          email
        ]
      }
    ]
  }
});

Then, you can use this schema to define new Form instance, and use this instance type to cast:

type LoginForm = FormInstance<typeof loginForm>;

const form = this.formily.getForm<LoginForm>('login');

All vue-formily element instance types are defined here.

The defineSchema global method can apply for all form elements: Form, Group, Collection, Field and validation rules schema: Rule.