该语法是Vue 3的新语法。该语法在构建时考虑了TypeScript集成。因此，Composition API将提供更好的TypeScript支持，而且我认为您不必为了使用TypeScript而更改语法。如果要在Vue 2中使用此语法，则可以使用composition-api软件包。 Vue 3将于2020年初发布，目前处于（pre）Alpha版本。如果您有时间研究这种新语法，建议您开始使用它进行编码，以熟悉Vue 3。
但是，如果您希望在使用composition API之前等待正式发布，请查看最后可用的语法。
Class API
引入类API的主要目的是提供一种具有更好TypeScript推理支持的替代API。
要使用Class API语法，您将需要安装软件包vue-class-component（已随Vue CLI一起安装）。
然后使用以下语法创建Vue组件：
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
props: {
myProp: {
type: String
}
}
})
export default class HelloWorld extends Vue {
myData: {name: string} = {name: 'test'}
// computed are declared with get before a function
get myComputed(): string {
return this.myData.name
}
created() {}
// methods are just functions
myMethod(): boolean {
return false
}
}
您将很快习惯这种语法！
这种语法的一个优点是，您可以按功能重新组合 'methods' 和 'computed'（composition API也为此目的而构建）。
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({})
export default class HelloWorld extends Vue {
// Autocomplete functionality
get computedRelatedToAutocomplete() {
...
}
methodRelatedToAutocomplete() {
...
}
// Search Functionality
get computedRelatedToSearch() {
...
}
methodRelatedToSearch() {
...
}
}
Vue 2完全支持软件包vue-class-component。
我们可以做的另一项改进是使用软件包vue-property-decorator。 该软件包也由Vue CLI安装。
有了它，甚至道具也将在组件的定义内：
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
// The props are defined here with the annotation @Prop()
@Prop()
private msg!: string;
myData: {name: string} = {name: 'test'}
// computed are declared with get before a function
get myComputed(): string {
return this.myData.name
}
// methods are just functions
myMethod(): boolean {
return false
}
}
缺点：Class API仍然不能与TypeScript完美配合，在Vue 3中将由Composition API代替。在Vue 3发布之后，我强烈建议您使用Composition API。
但是目前，这是我们最好的解决方案！从一种表示法更改为另一种表示法并不那么复杂。您可以一次更改一个文件，而仍然使用另一种语法运行其他文件。那就是我们从选项API更改为类API所做的。即使到了今天，我们仍然拥有带有选项API语法的旧文件（我们正在逐步迁移）。
实际上，您也可以同时使用Vue实现一个文件的TypeScript（如果将其添加到现有项目中）。您获取一个Vue文件，然后在script标签内添加lang =“ ts”。然后，修改组件以使用Class API并修复TypeScript发现的潜在错误。真的很简单！
技巧和小贴士
在Vue中输入道具
在您的项目中，您将要键入道具。确实，您为道具定义的类型应该是Vue类型中的一种。您可以使用布尔值，字符串，数组，但不能使用自制类型。
import Vue from 'vue';
type MySuperType = {
name: string
age: number
}
export default Vue.extend({
props: {
mySuperProps: {
type: MySuperType, // Will not work
required: true
}
}
})
您将需要使用另一种语法：
import Vue from 'vue';
type MySuperType = {
name: string
age: number
}
export default Vue.extend({
props: {
mySuperProps: {
type: Object as () => MySuperType,
required: true
}
}
})
在Vuex中使用Typescript