ts总结大全

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区别

1. 很多时候。可以自由切换

2. interface支持对象类型，可以继承

3. type可以支持任何类型，通过交叉类型(&)实现复用

4. 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'
}
}
}

在接口上用泛型不同点:

1. 接口上：interface

2. 不需要等于号

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()
})