0%

vue3 typescript config

发表于 更新于 分类于 ，

vue3 typescript

Vue Mastery 现时免费相关课程 Vue 3 + TypeScript course 到20213月9号,然后自己看了一遍,总结了一下发出来.

init with vuecli

用工具初始化,会有提示是否用ts.

create components with ts

对应代码看 Real World Vue 3 TypeScript GitHub Repo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script lant="ts">
import {defineComponent } from 'vue'

import EVentCard from '../components/EventCard.vue'
import EventService from '../services/EventService'

export default defineComponnets({
    name:'EventList',
    components:{EventCard},
    data(){
        return {events:null}
    },
    created(){
      EventService.getEvents().
        then(res =>{
         ...}
    }
....
</script>

VueDX

ide 支持是用的[VueDX][ref3]这个工具

1
2
3
4
5
6
interface TodoItem{
   label:string
   complete:boolean
}

const futureTodoItem ={} as TOdoItem

Props with Types

1
2
3
4
5
6
7
8
9
10
11
import {defineComponent ,PropType } from 'vue'

exprt default defineComponent({

    props :{
        event: {
            type: Object as PropType<EventItem>,
            require:true
            }
            }
....

Computed & Methods with Custom Types

重点在想返回什么

1
2
3
4
5
.....
computed:{
  firstEvent():EventItem{
      ....
  }

others 扩充资料