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:
<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:
<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:
// 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:
<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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.