Khi viết một component bằng TypeScript ở Vue 3, như bên dưới:
<template> <div class="counter">{{ count }}</div> <button @click="incrementCount">Increment</button> </template> <script lang="ts"> import { ref, defineComponent } from 'vue' export default defineComponent({ name: 'Counter', setup: () => { const count = ref(0) const incrementCount = () => count.value++ return { count, incrementCount } } }) </script> <style scoped> .counter { color: green; } </style>
IDE của bạn sẽ không hiểu được *.vue này, để giải quyết vấn đề trên, chúng ta tạo một file có tên là shims-vue.d.ts với nội dung như sau:
declare module '*.vue' { import { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component }
Còn đối với TSX, thì ta tạo file sau shims-tsx.d.ts:
import Vue, { VNode } from 'vue' declare global { namespace JSX { // tslint:disable no-empty-interface interface Element extends VNode {} // tslint:disable no-empty-interface interface ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any } } }
Điều này có thể giúp cho IDE hiểu được các file có đuôi là *.vue và đuôi *.tsx trong dự án của bạn.