1. Create the TS project

- Vuecli: NPM install -g@vue /cli@next - Create a project: vue create demo - Go to the project folder: CD demo - Add typescript: vue add typescriptCopy the code

The configuration options are as follows:

2. Define interface and method in uncombined form

<script lang="ts"> import {defineComponent} from 'vue' // Define interface News {title:string, description: string, count: Number | string, content? // let newsData:News = {// title: "I am a News ", // description:" I am a News descriptor ", // count: 12 //} let newsData = {title: "I am a news ", description:" I am a news descriptor ", count: 12 } as News export default defineComponent({ name:'News', data() { return newsData }, methods: { setCount():void { this.count = 111; }, setTitle(value:string):void { this.title = value; } }, computed: { reveraetitle():string{ return this.title.split("").reverse().join("") } }Copy the code

3. Define interface, method, calculation attribute, etc

< script lang = "ts" > import {defineComponent} from 'vue' import {toRefs, reactive, ref, computed} from vue / / define interfaces interface User { username:string, age: Number} export default defineComponent({name:'News', setup() {let user: user = reactive({// username: 'chengxuyuan', // age: 20 //) // set user = reactive< user >({// username: 'chengxuyuan', // age: 20 //) }) {reactive({username: 'chengxuyuan', age: 20 }) as User let count = ref<string|Number>(10); let reverseName = computed(():string=>{ return user.username.split("").reverse().join("") }) return { ... toRefs(user), count, reverseName } } }) </script>Copy the code