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

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

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

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

  4. type不能重复定义,interface可以重复定义会合并

用泛型

interface Data<T>{name:stringage:numberavator:stringaddress: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:90avator:""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:stringage:numberavator:stringaddress:{city:string}
}和
type Mange={name:stringage:numberavator:stringaddress:{company:string}
}
//以上两个多的话不好复用,所以
type Data<T>={name:stringage:numberavator:stringaddress:T
}

更简洁

type User={city:string
}
type User={city:string
}
//用泛型更简洁
type Data<T>={name:stringage:numberavator:stringaddress:T
}
type UserData=Data<User>
type MangerData=Data<Manger>
​
let zs:UserData={name:'zs'age:90avator:''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: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

<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:stringnum?: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 HTMLButtonElementele.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()
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/688247.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全网最全软件测试面试八股文

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一般软件测试的面试分为三轮&#xff1a;笔试&#xff0c;HR面试&#xff0c;技术面试。 前两轮…

【Go】四、rpc跨语言编程基础与rpc的调用基础原理

Go管理工具 早期 Go 语言不使用 go module 进行包管理&#xff0c;而是使用 go path 进行包管理&#xff0c;这种管理方式十分老旧&#xff0c;两者最显著的区别就是&#xff1a;Go Path 创建之后没有 go.mod 文件被创建出来&#xff0c;而 go module 模式会创建出一个 go.mod…

Github 2024-02-17 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-17统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4TypeScript项目3Rust项目2Jupyter Notebook项目1PowerShell项目1JavaScript项目1 Black&#xff…

标准IO 2月4日学习笔记

IO输入输出&#xff0c;操作对象是文件 Linux文件类型: b block 块设备文件 按块扫描设备信息的文件 存储设备 c character 字符设备文件 按字符扫描设备信息的文件 d direct…

单片机学习笔记---AD模数转换DA数模转换

目录 AD模数转换 XPT2046.c XPT2046.h main.c DA数模转换 main.c 上一篇博客讲了AD/DA转换的工作原理&#xff0c;也介绍了运算放大器的工作原理&#xff0c;这节开始代码演示&#xff01; AD模数转换 新创建一个工程&#xff1a;AD模数转换 第一个工程将用到LCD1602和…

相机图像质量研究(34)常见问题总结:图像处理对成像的影响--拖影

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

Linux | Ubuntu通过USB访问Redmi K40存储出现xxx was not providedby any .service files错误

问题描述 通过USB Type-C数据线将Redmi K40手机&#xff08;查证发现其他Redmi系手机也存在如此问题&#xff09;连接至台式机Ubuntu 20.04后&#xff0c;手机切换至访问存储模式&#xff0c;Ubuntu上可以访问手机存储&#xff0c;并正常进行文件传输。标题所述问题的诱发原因…

AgentWeb - 基于Android的WebView

项目地址 GitCode - 开发者的代码家园 项目简介 AgentWeb 是一个基于的 Android WebView &#xff0c;极度容易使用以及功能强大的库&#xff0c;提供了 Android WebView 一系列的问题解决方案 &#xff0c;并且轻量和极度灵活&#xff0c;详细使用请参照上面的 Sample 。 …

5.9 BCC工具之nodejs_http_server.py简介

一,nodejs_http_server.py简介 同样地,我们先了解下USDT,USDT即Userland Statically Defined Tracing,它是一种静态定义的跟踪技术,用于在用户空间应用程序中添加自定义的跟踪点。USDT利用DTrace(动态跟踪)框架,允许开发者在代码中定义跟踪点,并在需要时启用它们。这…

力扣 第 124 场双周赛 解题报告 | 珂学家 | 非常规区间合并

前言 整体评价 T4的dp解法没想到&#xff0c;走了一条"不归路", 这个区间合并解很特殊&#xff0c;它是带状态的&#xff0c;而且最终的正解也是基于WA的case&#xff0c;慢慢理清的。 真心不容易&#xff0c;太难了。 T1. 相同分数的最大操作数目 I 思路: 模拟 c…

吴恩达机器学习全课程笔记第二篇

目录 前言 P31-P33 logistics &#xff08;逻辑&#xff09;回归 决策边界 P34-P36 逻辑回归的代价函数 梯度下降的实现 P37-P41 过拟合问题 正则化代价函数 正则化线性回归 正则化logistics回归 前言 这是吴恩达机器学习笔记的第二篇&#xff0c;第一篇笔记请见&…

day32打卡

day32打卡 122. 买卖股票的最佳时机 II 解法&#xff0c;贪心&#xff1a;局部&#xff0c;收集每天的正利润-》整体&#xff0c;获取最大利润 从第0天到第3天&#xff0c;利润为&#xff1a;price[3] - price[0]&#xff0c;也可以是(price[3] - price[2]) (price[2] - pr…

160基于matlab的负熵和峭度信号的盲分离

基于matlab的负熵和峭度信号的盲分离。基于峭度的FastICA算法的收敛速度要快&#xff0c;迭代次数比基于负熵的FastICA算法少四倍以上。SMSE随信噪比增大两种判据下的FastICA算法都逐渐变小&#xff0c;但是基于峭度的算法的SMSE更小&#xff0c;因此基于峭度的FastICA算法性能…

论文精读--对比学习论文综述

InstDisc 提出了个体判别任务&#xff0c;而且利用这个代理任务与NCE Loss去做对比学习从而得到了不错的无监督表征学习的结果&#xff1b;同时提出了别的数据结构——Memory Bank来存储大量负样本&#xff1b;解决如何对特征进行动量式的更新 翻译&#xff1a; 有监督学习的…

C++并发编程 -3.同步并发操作

本文介绍如何使用条件变量控制并发的同步操作、C 并发三剑客&#xff0c;函数式编程 一.条件变量 1.概念 C条件变量&#xff08;condition variable&#xff09;是一种多线程编程中常用的同步机制&#xff0c;用于线程间的通信和协调。它允许一个或多个线程等待某个条件的发生…

爬虫之正则表达式

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 概念&#xff1a; 正则表达式(regular expression)描述了一种字符串匹配的模式&#xff08;pattern&#xff09;&#xff0c;正则匹配是一个模糊的匹配(不是精确匹配) 如下四个方法经常使用&#xff1a; match()search()f…

基于Java+SpringBoot+vue+elementui 实现即时通讯管理系统

目录 系统简介效果图源码结构试用地址源码下载地址技术交流 博主介绍&#xff1a; 计算机科班人&#xff0c;全栈工程师&#xff0c;掌握C、C#、Java、Python、Android等主流编程语言&#xff0c;同时也熟练掌握mysql、oracle、sqlserver等主流数据库&#xff0c;能够为大家提供…

Django学习笔记教程全解析:初步学习Django模型,初识API,以及Django的后台管理系统(Django全解析,保姆级教程)

把时间用在思考上是最能节省时间的事情。——[美]卡曾斯 导言 写在前面 本文部分内容引用的是Django官方文档&#xff0c;对官方文档进行了解读和理解&#xff0c;对官方文档的部分注释内容进行了翻译&#xff0c;以方便大家的阅读和理解。 概述 在上一篇文章里&#xff0…

huggingface入门玩耍LLM Starter

huggingface入门玩耍LLM Starter huggingface-cli 下载model 下载 本人macos系统&#xff0c;以下可参考 huggingface-cli 下载 brew install huggingface-climodel 下载 以 chatglm-6b 为例 huggingface-cli download --token hf_*** --resume-download THUDM/chatglm-6b-i…

Typora+PicGO+腾讯云COS做图床

文章目录 Typora&#xff0b;PicGO&#xff0b;腾讯云COS做图床一、为什么使用图床二、Typora、PicGO和腾讯云COS介绍三、下载Typora和PicGOTyporaPicGO 四、配置Typora、PicGO和腾讯云COS腾讯云COS配置PicGO配置Typora配置 Typora&#xff0b;PicGO&#xff0b;腾讯云COS做图床…