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 | null=null timer=setTimeout(()=>{},1000)
arr6类型是数字或字符串数组
let arr6:number | string[]=['j']
3、类型别名
type类型别名=具体类型
类型别名起名用大驼峰
type CustomType=(number | string)[] let arr7:CustomType=[1,'2']
4、函数类型
分别指定参数和返回值的类型
普通函数 function getSum(a：number,b:number):number{ return a+b } 函数表达式 const getSum=function(a:number,b:number):number{ return a+b } 箭头函数 const getSum=(a:number,b:number):number=>{ return a+b }
同时指定 (参数类型)=>返回值类型
const getSum:(a:number,b:number)=>number=(x,y)=>{ return x+y } 或 type Fn=(a:number,b:number)=>number const getSum:Fn=(a,b)=>{ return a+b }
如果函数不需要返回值.
:void可省略，如果写:undefined，必须写return undefined
const fn=():void=>{ console.log('hhhhh') }
可选参数？就是参数可传可不传--->必须写到后面
const fn2=(b:number,num?:number)=>{ } fn2(10)//10给b
函数上用接口---->泛型函数
function getSnum<T>(sno:T){ } const sno=getSnum<number>(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:string age?:number//可选 } ={name:'zs',age:20}
6、接口
interface描述对象类型
interface 可以继承-->目的实现复用 interface Person{ eat():void sleep():void } interface Student{ name:string age:number study:()=>void } let s1.Student={name:'list',age:20,study(){},eat(){},sleep(){}} type 类型别名 type Student={ name:string age:number study:()=>void } 实现复用 type Student={ name:string age:number study:()=>void }& Person let s1.Student={name:'list',age:20,study(){}}
interface和type区别
-
很多时候。可以自由切换
-
interface支持对象类型，可以继承
-
type可以支持任何类型，通过交叉类型(&)实现复用
-
type不能重复定义，interface可以重复定义会合并
用泛型
interface Data<T>{ name:string age:number avator:string address:T } interface User:{ province:string city:string } interface Manger{ company:string } //用泛型简洁 let zs:Data<User>={ name:'zs' age:90 avator:'' address:{province:'安徽',city:'黄山'} } let list:Data<Manager>={ name:'zs' age:90 avator:"" address:{ company:'PDD' } } }
在接口上用泛型不同点:
-
接口上：interface
-
不需要等于号
7、类型推断
没有指定类型，ts会导出其类型
类型注解能省略就省略
变量初始化
let score=100 //函数返回值会推断类型 const myFn=(a:number,b:number)=>{ }
8、字面量
const a=1=>const a:1=1 //字面量配合联合类型，表示一组可选值 let degree:'专科' | '本科' | '研究生'='本科'
9、ang(不推荐使用)
作用：逃避ts，没有类型
不受类型的约束
隐式：
-
定义没有初始值
-
函数形参，就是any
10、类型断言
查找dom元素
ts把alink的类型推断为HTMLElement(普通的标签类型)--->前面必须是锚点连接
const link=document.getElementById('link') as HTMLElement
console.log(alink.href)11、泛型
type User={ name:string age:number avator:string address:{ city:string } }和 type Mange={ name:string age:number avator:string address:{ company:string } } //以上两个多的话不好复用，所以 type Data<T>={ name:string age:number avator:string address:T }更简洁
type User={ city:string } type User={ city:string } //用泛型更简洁 type Data<T>={ name:string age:number avator:string address:T } type UserData=Data<User> type MangerData=Data<Manger> let zs:UserData={ name:'zs' age:90 avator:'' address:{province:'安徽',city：'黄山'} }
12、ts与vue结合
在vi中有安装的方式
第一步安装项目
npm create vite@latest 名称 -- --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
<template> <div> <hello-world msg="hi"></hello-world> </div> </template> <script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue'; </script> <style> </style>
儿子：src/components/HelloWorld.vue
<template> <div> 子组件 <p>{{ msg }}</p> </div> </template> <script setup lang="ts"> //平常写法 defineProps({ msg:String }) //用ts写的方法 <script setup lang="ts"> defineProps<{ msg:string num?:number//加上？是可选的,如果不加会错 }>() //页面上出现：hi //默认值平常写法 defineProps({ msg:{ type:String, default:'hello' }, //设为默认，如果有值，就传，没有就不传 num:Number }) //页面上出现：hello //默认值ts写法 withDefaults(defineProps<{ msg:string num?:number }>(),{ num:100 }) 页面上是100 </script> <style> </style>
14、子传父
父亲：App.vue
<template> <div> <hello-world :msg="msg" @change="change"></hello-world> </div> </template> <script setup lang="ts"> import {ref} from 'vue' import HelloWorld from './components/HelloWorld.vue'; const msg=ref('hi') const change=(v:string)=>{ msg.value=v } </script> <style> </style>
儿子：src/components/HelloWorld.vue
<template> <div> 子组件 <p>{{ msg }}</p> <button @click="changer">修改</button> </div> </template> <script setup lang="ts"> withDefaults(defineProps<{ msg:string num?:number }>(),{ num:100 }) //e约束自定义事件名称，msg参数 const emit=defineEmits<{ //冒号前面拘束emit参数类型，冒号后面约束emit返回值类型 (e:'change',msg:string):void }>() const changer=()=>{ emit('change','son') } </script> <style> </style>
点击按钮，会把儿子传父亲
ref会根据数据自动推断类型
1、假如是简单类型、利用类型推导
const msg=ref('hi')
2、假如是引用数据类型、利用类型
type Todo={ id:number name:string donge:boolean } const task=ref<Todo[]>([]) task.value=[{id:1,name:'coding'}]
reactive的TS写法
1、默认值属性固定，可以使用类型推导
const book =reactive({title:'ts从入门到放弃'，price：59})
2、类型推导的类型不符合需求，手动给变量或常量指定类型
type Book={ title:string price?:number } const book:Book=reactive({ttile:'5555',price:999}) console.log(book)
计算属性的ts怎么写--可以用类型推断或者泛型
//类型推导 const upperMsg=computed(()=>{ return msg.value.toUpperCase() }) //用泛型 const upperMsg=computed<string>(()=>{ return msg.value.toUpperCase() })
事件处理的ts
函数参数e默认推断ang类型
const handClick=(e:Event)=>{ const ele=e.target as HTMLButtonElement ele.disabled= }
ref
获取dom元素，
<template> <input type='text' ref='iptRef'> </template> const iptRef=ref<HTMLInputElement | null>(null)s onMounted(()=>{//用生命周期挂载 //类型守卫 // 第一种 if(iptRef.value){ iptRef.value.focus() } // 第二种 iptRef.value?.focus() // 第三种 iptRef.value && iptRef.value.focus() //非空断言 iptRef.value!.focus() })