Vue3+TS和Vue2+TS的编写示例，同时加上接口约束

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进行约束。这样做可以让我们在开发时更加方便地进行类型检查，同时也可以提高代码的可读性和可维护性。