以下是Vue3+TypeScript和Vue2+TypeScript的编写示例，同时加上接口约束：
Vue3+TypeScript
<template>
<div>
<h1>{
{
title }}</h1>
<ul>
<li v-for="(item, index) in list" :key="index">{
{
item }}</li>
</ul>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref } from 'vue'
interface Props {
title: string;
list: string[];
}
export default defineComponent({
name: 'MyComponent',
props: {
title: {
type: String,
required: true
},
list: {
type: Array,
required: true
}
} as Props,
setup(props: Props) {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
})
</script>
Vue2+TypeScript
<template>
<div>
<h1>{
{
title }}</h1>
<ul>
<li v-for="(item, index) in list" :key="index">{
{
item }}</li>
</ul>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
interface Props {
title: string;
list: string[];
}
export default Vue.extend({
name: 'MyComponent',
props: {
title: {
type: String,
required: true
},
list: {
type: Array,
required: true
}
} as Props,
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
})
</script>
**注意到Vue3+TypeScript与Vue2+TypeScript之间的主要区别是Vue3使用了setup函数来替代Vue2的data和methods属性，使用ref和reactive函数来实现响应式数据。Vue3的组件声明方式更加简洁，代码量更少。同时，Vue3中的TypeScript支持也更加完善，包括更好的类型推断和更好的类型定义。
**在组件定义时，分别加上了一个Props接口来对props进行约束。这样做可以让我们在开发时更加方便地进行类型检查，同时也可以提高代码的可读性和可维护性。