DevExtreme Vue - TypeScript Support

DevExtreme Vue components are supplied with TypeScript declarations. Strict typing allows you to catch bugs at earlier stages and use features like code completion and automated refactoring.

The following code shows an example of using TypeScript with DevExtreme components in a Vue application:

App.vue
Item.vue
<template>
    <div>
        <DxList :items="items" ref="list">
            <template #item="{data}">
                <Item :text="data.text" />
            </template>
        </DxList>
    </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import { DxList } from 'devextreme-vue/list';
import Item from './components/Item.vue';

interface IListItemProps {
    text: string;
}

@Component({
    components: {
        DxList,
        Item
    }
})

export default class App extends Vue {
    public $refs: Vue['$refs'] & {
        list?: DxList,
    } = {};

    public items: IListItemProps[] = [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
    ];
}
</script>
<template>
    <div @click="addCounter">
        {{text}} was clicked {{counter}} times
    </div>
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';  

@Component
export default class Item extends Vue {
    @Prop() public text!: string;
    public counter: number = 0;
    public addCounter() {
        this.counter = this.counter + 1;
    }
}
</script>
See Also

Component Specific Types

To get component-specific types, import the DxComponentTypes declaration where Component is the component name:

App.vue
<template>
    <DxDateBox :type="dateType" />
</template>

<script setup lang="ts">
import DxDateBox from "devextreme-vue/date-box";
import type { DxDateBoxTypes } from "devextreme-vue/date-box";

const dateType: DxDateBoxTypes.DateType = "datetime";
</script>

If you need the same type for multiple components, you can also import this type from common submodule:

App.vue
// In the sample below, ValidationRule is imported for each component:

import { DxDataGridTypes } from 'devextreme-vue/data-grid';
import { DxFormTypes } from 'devextreme-vue/form';

const dataGridValidationRule: DxDataGridTypes.ValidationRule;
const formValidationRule: DxFormTypes.ValidationRule;

// In the sample below, ValidationRule is imported from the common submodule:

import { ValidationRule } from 'devextreme-vue/common';

const dataGridValidationRule: ValidationRule;
const formValidationRule: ValidationRule;

Generics Usage

DevExtreme supports Generics for properties and methods that operate internal data. You can use Generics inside event handlers and to define instances of data-aware components like DataGrid:

App.vue
<template>
    <div>
        <DxButton 
            text="Disable DataGrid" 
            @click="onButtonClick" 
        />
        <DxDataGrid 
            :data-source="dataSource" 
            ref="dataGridRef" 
            @editor-preparing="onEditorPreparing"
        >
        </DxDataGrid>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

import { DxDataGrid } from "devextreme-vue/data-grid";
import { DxButton } from "devextreme-vue/button";

import type { DxDataGridTypes } from "devextreme-vue/data-grid";
import type dxDataGrid from 'devextreme/ui/data_grid';
import type { Employee } from '../data';

const dataGridRef = ref<DxDataGrid>();

function onButtonClick() {
    const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid<Employee, number>;
    dataGridInstance.option("disabled", true);
}

function onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent<Employee, number>) {
    if (e.dataField === 'LastName' && e.parentType === 'dataRow') {
        e.editorOptions.disabled = e.row?.data?.FirstName === '';
    }
}
</script>