All docs
V19.2
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

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>
        <dx-list :items="items" ref="list">
            <template #item="{data}">
                <Item :text="data.text" />
            </template>
        </dx-list>
    </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import { DxList } from 'devextreme-vue/ui/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