广西网站建设智能优化,百度空间登录入口,seo短视频网页入口引流方案,10元备案域名购买ts类型
TS类型除了原始js类型之外#xff0c;还增加类型#xff0c;例如#xff1a;枚举、接口、泛型、字面量、自定义、类型断言、any、类型声明文件
数组类型两种写法#xff1a;类型 [] 或 Array 类型 let arr:number[][1,2,3,4]
let arr:string[][a]
let arr…ts类型
TS类型除了原始js类型之外还增加类型例如枚举、接口、泛型、字面量、自定义、类型断言、any、类型声明文件
数组类型两种写法类型 [] 或 Array 类型 let arr:number[][1,2,3,4]
let arr:string[][a]
let arr:Array string[a] 需求如果想要类型和长度都限定
1、元组类型
方法元组-数组的类型和长度都限定,并且可以让元素有不同的类型 //语法
let arr:[number,number][1,3]
let arr:[number,string][1,3] 2、联合类型
数组存放数字或字符串-联合类型 let arr4:(number | string)[][1,2,3] 定时器为number类型 let timer:number | nullnull
timersetTimeout((){},1000) arr6类型是数字或字符串数组 let arr6:number | string[][j] 3、类型别名
type类型别名具体类型
类型别名起名用大驼峰 type CustomType(number | string)[]
let arr7:CustomType[1,2] 4、函数类型
分别指定参数和返回值的类型 普通函数
function getSum(anumber,b:number):number{
return ab
}
函数表达式
const getSumfunction(a:number,b:number):number{return ab
}
箭头函数
const getSum(a:number,b:number):number{return ab
} 同时指定 (参数类型)返回值类型 const getSum:(a:number,b:number)number(x,y){
return xy
}
或
type Fn(a:number,b:number)number
const getSum:Fn(a,b){return ab
} 如果函数不需要返回值. :void可省略如果写:undefined必须写return undefined const fn():void{
console.log(hhhhh)
} 可选参数就是参数可传可不传---必须写到后面 const fn2(b:number,num?:number){
}
fn2(10)//10给b 函数上用接口----泛型函数 function getSnumT(sno:T){}
const snogetSnumnumber(1001)//约束数字型 5.对象类型
描述对象的属性和方法类型、 let obj:{}{a:1}//空对象
let obj2:{a:10}{a:10}//值为固定的、
let person:{name:string,age:number}{name:zs,age:20}
//相当于
let person2:{name:stringage?:number//可选
}
{name:zs,age:20}
6、接口
interface描述对象类型 interface
可以继承--目的实现复用
interface Person{eat():voidsleep():void
}
interface Student{name:stringage:numberstudy:()void
}
let s1.Student{name:list,age:20,study(){},eat(){},sleep(){}}type
类型别名
type Student{name:stringage:numberstudy:()void
}
实现复用
type Student{name:stringage:numberstudy:()void
} Person
let s1.Student{name:list,age:20,study(){}}
interface和type区别 很多时候。可以自由切换 interface支持对象类型可以继承 type可以支持任何类型通过交叉类型()实现复用 type不能重复定义interface可以重复定义会合并
用泛型 interface DataT{name:stringage:numberavator:stringaddress:T
}
interface User:{
province:string
city:string
}
interface Manger{company:string
}
//用泛型简洁
let zs:DataUser{
name:zs
age:90
avator:
address:{province:安徽,city:黄山}
}
let list:DataManager{name:zsage:90avator:address:{company:PDD
}
}
} 在接口上用泛型不同点: 接口上interface 不需要等于号
7、类型推断
没有指定类型ts会导出其类型
类型注解能省略就省略
变量初始化 let score100
//函数返回值会推断类型
const myFn(a:number,b:number){
} 8、字面量 const a1const a:11
//字面量配合联合类型表示一组可选值
let degree:专科 | 本科 | 研究生本科
9、ang(不推荐使用)
作用逃避ts没有类型
不受类型的约束
隐式 定义没有初始值 函数形参就是any
10、类型断言
查找dom元素
ts把alink的类型推断为HTMLElement(普通的标签类型)---前面必须是锚点连接
const linkdocument.getElementById(link) as HTMLElement
console.log(alink.href)
11、泛型 type User{name:stringage:numberavator:stringaddress:{city:string}
}和
type Mange{name:stringage:numberavator:stringaddress:{company:string}
}
//以上两个多的话不好复用所以
type DataT{name:stringage:numberavator:stringaddress:T
} 更简洁 type User{city:string
}
type User{city:string
}
//用泛型更简洁
type DataT{name:stringage:numberavator:stringaddress:T
}
type UserDataDataUser
type MangerDataDataManger
let zs:UserData{name:zsage:90avator:address:{province:安徽,city黄山}
} 12、ts与vue结合
在vi中有安装的方式
第一步安装项目 npm create vitelatest 名称 -- --template vue-ts 安装依赖 npm i 进入项目把components和App.vue都删除
main.js保留 import { createApp } from vue
// import ./style.css
import App from ./App.vue
createApp(App).mount(#app)
要把vetur禁用要不然出报错不过不影响
13、父传子
父亲App.vue templatedivhello-world msghi/hello-world/div
/template
script setup langtsimport HelloWorld from ./components/HelloWorld.vue;
/script
style
/style 儿子src/components/HelloWorld.vue templatediv子组件p{{ msg }}/p/div
/template
script setup langts
//平常写法
defineProps({msg:String
})
//用ts写的方法
script setup langtsdefineProps{msg:stringnum?:number//加上是可选的,如果不加会错}()
//页面上出现hi
//默认值平常写法defineProps({msg:{type:String,default:hello},//设为默认如果有值就传没有就不传num:Number})
//页面上出现hello
//默认值ts写法withDefaults(defineProps{msg:stringnum?:number}(),{num:100})
页面上是100
/script
style
/style 14、子传父
父亲App.vue templatedivhello-world :msgmsg changechange/hello-world/div
/template
script setup langts
import {ref} from vueimport HelloWorld from ./components/HelloWorld.vue;const msgref(hi)const change(v:string){msg.valuev}
/script
style
/style 儿子src/components/HelloWorld.vue templatediv子组件p{{ msg }}/p
button clickchanger修改/button/div
/template
script setup langtswithDefaults(defineProps{msg:stringnum?:number}(),{num:100})//e约束自定义事件名称msg参数const emitdefineEmits{//冒号前面拘束emit参数类型冒号后面约束emit返回值类型(e:change,msg:string):void
}()const changer(){emit(change,son)}
/script
style
/style 点击按钮会把儿子传父亲
ref会根据数据自动推断类型
1、假如是简单类型、利用类型推导 const msgref(hi) 2、假如是引用数据类型、利用类型 type Todo{
id:number
name:string
donge:boolean
}
const taskrefTodo[]([])
task.value[{id:1,name:coding}]
reactive的TS写法
1、默认值属性固定可以使用类型推导 const book reactive({title:ts从入门到放弃price59}) 2、类型推导的类型不符合需求手动给变量或常量指定类型 type Book{
title:string
price?:number
}
const book:Bookreactive({ttile:5555,price:999})
console.log(book) 计算属性的ts怎么写--可以用类型推断或者泛型
//类型推导
const upperMsgcomputed((){
return msg.value.toUpperCase()
})
//用泛型
const upperMsgcomputedstring((){
return msg.value.toUpperCase()
}) 事件处理的ts
函数参数e默认推断ang类型 const handClick(e:Event){const elee.target as HTMLButtonElementele.disabled
} ref
获取dom元素 templateinput typetext refiptRef
/template
const iptRefrefHTMLInputElement | null(null)s
onMounted((){//用生命周期挂载//类型守卫// 第一种if(iptRef.value){iptRef.value.focus()}// 第二种iptRef.value?.focus()// 第三种iptRef.value iptRef.value.focus()//非空断言iptRef.value!.focus()
})
