typescript - Vad är taggnamnet för en klassbaserad Vue-komponent

Se länken nedan, vi kan använda klassebaserad Vue-komponent som är skriven i TypeScript.
Vad är det korrekta sättet att använda dessa anpassade komponenter?

Till exempel definierar Es5-koden nedan en komponent som kan användas i andra komponenters mall som <my-component></my-component> eftersom vi satte ett namn 'my-component' som en parameter till Vue.component-metoden. Hur uppnår man detta i TypeScript?

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

Vue.component('parent-component', {
  template: '<my-component></my-component>'
})

https://v2.vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components https://alligator.io/vuejs/typescript-class-components/

Klassbaserad Vue-komponent Vad är taggnamnet på denna komponent som kan användas i andra komponenters mallsträng?

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'
  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

Svar #1

Du kan fortfarande registrera komponenter som vanligt som om du inte använde Typescript:

// MyComponent.ts

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  message: string = 'Hello!'
  onClick (): void {
    window.alert(this.message)
  }
}

// Register the component globally
Vue.component('my-component', MyComponent)

Eftersom koden ovan exporterar komponenten från ett modul, bör du förmodligen inte registrera den globalt (om det inte är en vanlig komponent). Det bästa sättet skulle vara att importera komponenten till modulerna av andra komponenter som kommer att använda den:

// App.ts

import Vue from 'vue'
import MyComponent from './MyComponent'

new Vue({
  el: '#app',
  components: {
    MyComponent  // will register as <my-component> in #app's template
  }
})