vue3 ts 声明对象
时间: 2023-09-15 18:21:54 浏览: 44
在Vue3中使用TypeScript声明对象的方法与Vue2大致相同,但是需要注意一些细节。下面是一个简单的例子:
```typescript
<template>
<div>
<p>{{ message }}</p>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
message: 'Hello, TypeScript!',
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
});
</script>
```
在这个例子中,我们使用`defineComponent`函数来定义一个Vue组件。`data`属性是一个对象,我们可以用一个简单的类型声明来指定它的类型:
```typescript
data(): { message: string, count: number } {
return {
message: 'Hello, TypeScript!',
count: 0,
};
},
```
我们也可以使用接口来定义对象的类型:
```typescript
interface MyData {
message: string;
count: number;
}
export default defineComponent({
data(): MyData {
return {
message: 'Hello, TypeScript!',
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
});
```
无论是哪种方式,我们都可以在组件中使用类型安全的数据。