string,age:number}{name:zs,age:20}

//相当于

person2:{name:stringage?:number//可选

{name:zs,age:20}

Student{name:stringage:numberstudy:()void

let

s1.Student{name:list,age:20,study(){},eat(){},sleep(){}}type

类型别名

Student{name:stringage:numberstudy:()void

实现复用

Student{name:stringage:numberstudy:()void

Person

s1.Student{name:list,age:20,study(){}}

interface和type区别

DataT{name:stringage:numberavator:stringaddress:T

interface

list:DataManager{name:zsage:90avator:address:{company:PDD

在接口上用泛型不同点:

ts把alink的类型推断为HTMLElement(普通的标签类型)---前面必须是锚点连接

const

linkdocument.getElementById(link)

HTMLElement

User{name:stringage:numberavator:stringaddress:{city:string}

type

Mange{name:stringage:numberavator:stringaddress:{company:string}

type

DataT{name:stringage:numberavator:stringaddress:T

更简洁

DataT{name:stringage:numberavator:stringaddress:T

type

zs:UserData{name:zsage:90avator:address:{province:安徽,city黄山}

12、ts与vue结合

儿子src/components/HelloWorld.vue

templatediv子组件p{{

langtsdefineProps{msg:stringnum?:number//加上是可选的,如果不加会错}()

//页面上出现hi

//默认值平常写法defineProps({msg:{type:String,default:hello},//设为默认如果有值就传没有就不传num:Number})

//页面上出现hello

//默认值ts写法withDefaults(defineProps{msg:stringnum?:number}(),{num:100})

/script

./components/HelloWorld.vue;const

msgref(hi)const

儿子src/components/HelloWorld.vue

templatediv子组件p{{

langtswithDefaults(defineProps{msg:stringnum?:number}(),{num:100})//e约束自定义事件名称msg参数const

emitdefineEmits{//冒号前面拘束emit参数类型冒号后面约束emit返回值类型(e:change,msg:string):void

}()const

reactive({title:ts从入门到放弃price59})

type

book:Bookreactive({ttile:5555,price:999})

console.log(book)

第一种if(iptRef.value){iptRef.value.focus()}//

第三种iptRef.value

iptRef.value.focus()//非空断言iptRef.value!.focus()