当前位置: 首页 > news >正文

typescript复习笔记

数组类型-限定每一项的类型

//写法一
const arrNumber: number[] = [1, 2, 3]
const arrString: string[] = ['a', 'b', 'c']
//写法二
const arrNumber2: Array<number> = [1, 2, 3]
const arrString2: Array<string> = ['a', 'b', 'c']

联合类型 符号是 |

//数组可以存放字符串或者数字
let arr: (string | number)[]
arr = ['1', '2', 3]
//字符串数据或数字数组
let arr2: string[] | number[]
arr2 = ['a', 'b', 'c']
arr2 = [1, 2, 3]

类型别名

//类型别名
type MyType = (string | number)[]
let arr: MyType
arr = ['a', 'b', 'c']
arr = [1, 2, 3]

TS函数-函数参数的类型

//TS函数-函数参数的类型
function fn(num1: number, num2: number) {console.log(num1 + num2);
}

TS函数-箭头函数的参数类型

//TS函数-箭头函数的参数类型
const fn = (num1: number, num2: number) => {console.log(num1 + num2);
}
//如果只有一个形参还要指定类型,不能省略小括号
const fn2 = (num1:number) => {console.log(num1);
}

TS函数-返回值的类型

//TS函数-返回值的类型
function fn():number{return 1
}
const fn2 = ():string => {return 'a'
}

TS函数-完整写法

//TS函数-完整写法
const fn = (num1: number, num2: number): number => num1 + num2

TS函数-把类型定义写到等于号左边

//TS函数-把类型定义写到等于号左边
type Fn = (num1: number, num2: number) => number
const fn: Fn = (num1, num2) => num1 + num2

TS函数-void类型

//TS函数-void类型
//函数没有返回值,返回类型为void
const fn = ():void => {console.log('23333');
}

TS函数-可选参数

//TS函数-可选参数
type Fn = (num1: number, num2?: number) => void
const fn: Fn = (num1, num2) => {console.log(num1);console.log(num2);
}
fn(1)
fn(1, 2)

TS函数-参数默认值

//TS函数-参数默认值
// TS可以根据参数的默认值,自动推导参数的TS类型
const fn = (num1 = 1, num2 = 2) => {console.log(num1);console.log(num2);
}
fn(1)
fn(1, 2)

TS对象类型-规范对象结构

//TS对象类型-规范对象结构
type MyObj = {name: string,age: number
}
const myObj: MyObj = {name: 'zs',age: 18
}

TS对象类型-对象方法

//TS对象类型-对象方法
type MyObj = {name: string,age: number,sayHi: () => void
}
const myObj: MyObj = {name: 'zs',age: 12,sayHi: () => {console.log('你好');}
}

TS对象类型-可选成员

type MyObj = {name: string;age?: number
}let obj: MyObj
obj = {name: 'zs',age: 18
}
obj = {name: 'zs'
}

TS接口类型-interface定义对象

//只能定义对象结构
interface IPerson {name: string;age: number
}
let person: IPerson
person = {name: 'zs',age: 18
}

TS接口类型-extends继承

interface Print2D {x: number;y: number;
}interface Print3D extends Print2D {z: number
}let myPrint: Print3D
myPrint = {x: 12,y: 14,z: 23
}

type配合&实现继承

type Print2D = {x: number,y: number
}
type Print3D = Print2D & {z: number
}
let myPrint: Print3D
myPrint = {x: 1,y: 2,z: 3
}

TS元组类型-特殊的数组

//元组的长度是固定的,每一项类型是固定的
type MyArr = [string, number]
let arr: MyArr
arr = ['zs', 18]

TS字面量类型

//字面量类型常常与联合类型一起使用
type Method = 'get' | 'post'
let method: Method
method = "get"
method = "post"

TS枚举类型-提供代码可读性

//TS枚举编译成JS的时候会转换成一个JS对象
enum Gender {boy = 0,girl = 1,unknown = -1
}
const gender = Gender.boy

as类型断言

// 获取a标签
const alink = document.getElementById('link') as HTMLAnchorElement
alink.href

泛型函数-基础语法

const fn = <T>(value: T): T => {return value
}fn(2).toFixed(2)type Fn = <T>(value:T) => T
const fn2:Fn = (value) => {return value
}
fn2(2).toFixed(2)

泛型函数-剩余参数的TS类型

type Fn = <T>(...args: T[]) => T[]
const fn: Fn = (...args) => {console.log(args);return args
}
fn(1)//[1]
fn(1, 2)//[1,2]
fn('1', '2')//['1','2']

泛型函数-调用时完整写法

type Fn = <T>(value:T) => Tconst fn :Fn = (value) => {return value
}fn<string>('')
fn<string>('1')

泛型接口-基础语法

interface Response<T> {code: number;msg: stringresult: T;
}const res1: Response<string[]> = {code: 200,msg: '请求成功',result: ['1', '2']
}type Response2<T> = {code: number;msg: stringresult: T;
}const res2: Response<number[]> = {code: 200,msg: '请求成功',result: [1, 2]
}

泛型-添加约束

// 约束extends
interface Ilength {length: number
}
type Fn = <T extends Ilength>(value: T) => numberconst fn: Fn = (value) => {return value.length
}fn([1, 2])
fn('12')

泛型-多泛型变量和泛型默认值

type Fn = <T = string,K = unknown>(val:T,val2?:K) => voidconst fn:Fn = (val) => {console.log(val);
}

keyof获取对象类型的键名称

interface MyObj {name: string;age: number
}type Keys = keyof MyObj
let keys: Keys
keys = "age"
keys = "name"

泛型约束练习 一个函数接收一个对象和对象的key,返回对下个key对应的值

type Fn = <T, K extends keyof T>(obj: T, key: K) => unknownconst fn: Fn = (person, key) => {return person[key]
}interface IPerson {name: string,age: number
}
const person: IPerson = {name: 'zs',age: 18
}fn(person, "name")
fn(person, "age")

defineProps与Typescript

defineProps和PropType

<template><div><h1>子组件</h1><span>姓名:{{ personInfo.name }}</span><span>年龄:{{ personInfo.age }}</span></div>
</template>
<script setup lang="ts">
//引入 PropType
import { PropType } from "vue";interface IPersonInfo {name: string;age: number;
}
defineProps({personInfo: {type: Object as PropType<IPersonInfo>,required: true,},
});
</script>

defineProps泛型写法

<template><div><h1>子组件</h1><span>姓名:{{ personInfo.name }}</span><span>年龄:{{ personInfo.age }}</span></div>
</template>
<script setup lang="ts">
defineProps<{personInfo: {name: string;age: number;};// 不是必传car?: string;
}>();
</script>

defineProps默认值写法

//son.vue
const { car = '1000' } = defineProps<{personInfo: {name: string;age: number;};// 不是必传car?: string;
}>();
//vite.config.ts
export default defineConfig({plugins: [vue({// defineprops默认值必须开启reactivityTransform: true})],
})

defineEmits与Typescript

//son.vue
//emit的ts结构可以通过鼠标悬停defineEmits()得到
const emit = defineEmits<{(event: "changeCar", val: number): void;
}>();
//father.vue
//此时通过TS提示就知道val是什么类型
const changeCard = (val: number) => {car.value += val;
};

ref与Typescript

interface IToDo {id: number;content: string;isDone: boolean;
}
const toDoList = ref<IToDo[]>([]);
toDoList.value.push({ id: 0, content: "睡觉", isDone: false });

computed与Typescript

// computed内部可以推导,不用写成computed<>()结构

事件处理与Typescript

// 通过悬停addEventListener("mousemove", mouseFn),得到Mousemove类型
const mouseFn = (e: MouseEvent) => {console.log(e.clientX);
};
onMounted(() => {document.addEventListener("mousemove", mouseFn);
});<p @click="clickHandle">点击事件</p>
//通过悬停@click得到MouseEvent类型
const clickHandle = (e: MouseEvent) => {console.log(e.clientX);
};

模板ref于Typescript

//悬停document.querySelector('p')得到p标签的类型
const p = ref<HTMLParagraphElement>();
onMounted(() => {// p的值可能不存在,严谨写法if (p.value) {console.log(p.value.clientWidth);}
});// 模板ref绑定组件
const son = ref<InstanceType<typeof Son>>();
onMounted(() => {// 严谨写法的简写形式 ?是可选链操作符console.log(son.value?.car);
});

非空断言

//悬停document.querySelector('p')得到p标签的类型
const p = ref<HTMLParagraphElement>();
onMounted(() => {// p的值一定存在 !是非空断言console.log(p.value!.clientWidth);
});

相关文章:

typescript复习笔记

数组类型-限定每一项的类型 //写法一 const arrNumber: number[] [1, 2, 3] const arrString: string[] [a, b, c] //写法二 const arrNumber2: Array<number> [1, 2, 3] const arrString2: Array<string> [a, b, c]联合类型 符号是 | //数组可以存放字符串或…...

webstorm开发electron,调试主进程方案

官网教程地址&#xff1a;https://www.electronjs.org/zh/docs/latest/tutorial/debugging-main-process 我只能说官网太看得起人了&#xff0c;整这么简易的教程…… 命令行开关 第一步还是要按要求在我们的package.json里加上端口监听&#xff1a;–inspect5858 我的命令…...

2W字正则表达式基础知识总结,这一篇就够了!!(含前端常用案例,建议收藏)

正则表达式 (Regular Expression&#xff0c;简称 RE 或 regexp ) 是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;正则表达式使用单个字符串来描述、匹配一系列匹…...

自学web前端觉得好难,可能你遇到了这些困境

好多人跟我说上学的时候也学过前端&#xff0c;毕业了想从事web前端开发的工作&#xff0c;但自学起来好难&#xff0c;快要放弃了&#xff0c;所以我总结了一些大家遇到的困境&#xff0c;希望对你会有所帮助。 目录 1. 意志是否坚定 2. 没有找到合适自己的老师 3. 为了找…...

ASEMI中低压MOS管18N20参数,18N20封装,18N20尺寸

编辑-Z ASEMI中低压MOS管18N20参数&#xff1a; 型号&#xff1a;18N20 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;200V 栅源电压&#xff08;VGS&#xff09;&#xff1a;30V 漏极电流&#xff08;ID&#xff09;&#xff1a;18A 功耗&#xff08;PD&#x…...

[NetBackup]客户端安装后server无法连通client

client name处填写客户端主机名&#xff0c;server to use for backups and restores处填写server端名字&#xff0c;与hosts文件内保持一致&#xff1b;source client for restores处填写client主机名&#xff0c;与server端hosts文件中保持一致&#xff0c;与主机实际名称保持…...

黑马Java后端项目实战--在线聊天交友

【课程简介】 越来越多的系统都有消息推送的功能&#xff0c;如聊天室、邮件推送、系统消息推送等&#xff1b; 要实现消息推送就需要服务端在数据有变化时主动推送消息给客户端&#xff0c;本次课程将带大家使用websocket实现消息推送。 【主讲内容】 1.方法&#xff1a;如…...

【实战系列 2】Yapi接口管理平台Getshell-Linux后门权限维持与痕迹清除

文章目录 前言一、网站主页到Getshell二、SSH软链接后门三、Linux权限维持 --隐藏踪迹3.1 隐藏远程SSH登陆记录3.2、ssh软链接后门连接失败的原因以及解决办法3.3、隐藏踪迹-痕迹清楚3.3.1、隐藏历史操作命令3.3.2、隐藏文件/文件夹3.3.3、修改文件时间戳3.3.4、隐藏权限3.3.5、…...

设计模式之抽象工厂模式(C++)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、抽象工厂模式是什么&#xff1f; 抽象工厂模式是一种创建型的软件设计模式&#xff0c;该模式相当于升级版的工厂模式。 如果…...

Kotlin新手教程一(Kotlin简介及环境搭建)

目录一、 什么是Kotlin&#xff1f;二、为什么要使用Kotlin&#xff1f;三、使用IntelliJ IDEA搭建Kotlin四、Kotlin使用命令行编译一、 什么是Kotlin&#xff1f; Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言&#xff0c;它也可以被编译成为 JavaScript 源代码&…...

【虚拟仿真】Unity3D打包WEBGL实现全屏切换

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 今天实现Unity3D打包WEBGL后实现按钮点击全屏和退出 全屏的实现…...

java对象内存结构分析与大小计算

java对象内存结构Java对象保存在堆中时&#xff0c;由三部分组成&#xff1a;对象头&#xff08;object header&#xff09;&#xff1a;包括了关于堆对象的布局、类型、GC状态、同步状态和标识哈希码的基本信息。所有java对象都有一个共同的对象头格实例数据&#xff08;Insta…...

RabbitMQ学习(七):交换器

〇、前言在之前的内容中&#xff0c;我们创建了一个工作队列。我们假设的是工作队列背后&#xff0c;每个任务都恰好交付给一个消 费者(工作进程)。在今天的内容中&#xff0c;我们将做一些完全不同的事情——我们将消息传达给多个消费者。这种模式 称为 “发布/订阅”。为了说…...

cmd命令大全

文章目录变量输入输出逻辑命令符控制语句函数注释变量 在批处理中&#xff0c;变量全部是弱类型的&#xff0c;通常可以当做字符串处理 1.初始化定义 set varthis a var 2.获取变量值 %var% 3.链接 set varcat%var1%%var2% 4.截取 %var:~n,m% n是起点&#xff0c;m是长度&…...

Git的使用方法(保姆级)

一、安装git二、创建凭据 ①打开电脑的凭据管理器git:https://gitee.com是固定写法用户名、密码是你创建gitee的用户名、密码三、在gitee中创建一个仓库四、项目提交到仓库的方法①选择一个项目交由git管理按照步骤一中召唤小黑窗口输入 git init 就可以出现.git文件夹②右键选…...

TypeScript 学习之泛型

泛型使用 组件不仅能够支持当前的数据类型&#xff0c;同时也能支持未来的数据类型。就需要使用泛型。使用泛型就不会丢失类型信息&#xff0c;使用any会丢失类型信息。 function identity<T>(arg: T): T {return arg; }identity 添加了类型变量T, T 捕获用户传入的类型…...

新手学习node.js基础,node.js安装过程,node.js运行环境及javascript运行环境.

学习node.js1.什么是node.js?2.node.js中的javaScript运行环境3.node.js可以做什么&#xff1f;4. node.js学习思路5.node.js环境的安装6.如何在node.js中执行JavaScript代码1.什么是node.js? node.js是一个基于Chrome v8 引擎的JavaScript运行环境(后端) node.js官网 &…...

Maven的安装步骤(保姆级安装教程)

一、安装本地Maven 选择你需要的maven版本下载&#xff1a;官网下载传送门 我使用的是3.6.1版本&#xff1a;maven-3.6.1-bin.zip 二、安装 把下载好的maven压缩包解压到一个没有中文&#xff0c;空格或其他特殊字符的文件夹&#xff0c;如&#xff1a; 三、配置环境变量…...

Axure教程(一)——线框图与高保真原型图制作

前面我们学习了制作网页的技能&#xff0c;从这里开始我们来学习前端必备技能&#xff0c;就是用Axure来制作原型图&#xff0c;一方面我们能提前绘制出我们所需的页面&#xff0c;这在我们开发的时候能节省大量的时间&#xff0c;另一方面我们能通过给用户进行体验从而能够发现…...

wholeaked:一款能够追责数据泄露的文件共享工具

关于wholeaked wholeaked是一款功能强大的文件共享工具&#xff0c;该工具基于go语言开发&#xff0c;可以帮助广大系统管理员和安全研究人员在组织发生数据泄露的时候&#xff0c;迅速找出数据泄露的“始作俑者”。 wholeaked可以获取被共享的文件信息以及接收人列表&#x…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...