Dinh Quoc Han

May 10, 2021

Sử dụng TypeScript và TSX trong Vue 3

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.