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/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>

TypeScript Support

See Also