![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
TypeScript
凡小多
邮箱:wgh4318@foxmail.com
展开
-
根据children内的指定key找父级的key
运用场景:如刷新菜单默认展开。原创 2022-10-30 18:19:32 · 296 阅读 · 0 评论 -
vue3自定义hooks之图片转base64
- Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数 - Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数原创 2022-07-12 14:30:00 · 1068 阅读 · 2 评论 -
a标签下载和window.location.herf下载
下载文件原创 2022-07-12 11:37:58 · 1048 阅读 · 0 评论 -
TypeScript中的as unknown as xxx的用法及目的
目的:类型断言,是一种可能解释,强制转换为后面的一种格式原创 2022-07-05 10:04:13 · 2588 阅读 · 2 评论 -
TS中的类型之数组、元组、枚举以及类型别名
数组// 数组的类型声明:// 类型[] 或者 Array<类型>// string[] 表示字符串数组// number[] 表示数值数组let a: number[]a = [1,2,3]let b: Array<number>b = [5,6,8]元组 tuple元组就是固定长度的数组// 元组的类型声明:// 语法:[类型, 类型, 类型]let a: [number, string]a = [1,'abab']枚举 enum设置多个值原创 2022-01-28 15:29:05 · 2733 阅读 · 0 评论 -
TS中的类型之函数
函数// 设置函数结构的类型声明:// 语法:(形参: 类型, 形参: 类型...) => 返回值let d: (a: number, b: number)=>number原创 2022-01-28 15:05:06 · 727 阅读 · 0 评论 -
TS中的类型之对象
对象// {}用来指定对象中可以包含哪些属性// 语法:{属性名: 属性值, 属性名: 属性值...}// 在属性名后面加?,表示该属性是可选的let a:{name: string, age?: number}a = {name: '多多', age: 18}a = {name: '图图'}// [propName: string]: any 表示任意类型的属性let b:{name: string, [propName: string]: any}b = {name: '小明', a原创 2022-01-28 15:01:17 · 2257 阅读 · 0 评论 -
typescript中的 as、问号、感叹号
as 关键字用于断言在Typescript中,表示断言有两种方式。一种是扩号表示法:let someValue: any = "this is a string";let strLength: number = (someValue).length;另一种使用as关键字:let someValue: any = "this is a string";let strLength: number = (someValue as string).length;问号(?)用于属性定义问号表示可选转载 2021-12-23 12:37:17 · 2226 阅读 · 0 评论 -
string转hex、补0、判断是否为网址、日期格式化函数
const stringToHex = (str: string) => { if (str === '') return ''; const hexCharCode = []; for (let i = 0; i < str.length; i += 1) { // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 hexCharCode.push(str.charCodeAt(i).toStri原创 2021-12-22 10:19:12 · 378 阅读 · 0 评论 -
TypeScript - TS的类型断言
问题:调用 querySelector() 通过 id 选择器获取 DOM 元素时,拿到的元素类型都是 Element导致新问题:无法访问 img 元素的 src 属性了。因为:Element 类型只包含所有元素共有的属性和方法(比如:id 属性)解决方式:使用类型断言,来手动指定更加具体的类型(比如,此处应该比 Element 类型更加具值 as 更具体的类型let img = document.querySelector('#image') as HTMLImageElement技巧:原创 2021-10-30 18:01:14 · 389 阅读 · 0 评论 -
TypeScript - 浏览器中运行TS
注意:浏览器中只能运行 JS,无法直接运行 TS,因此,需要将 TS 转化为 JS 然后再运行浏览器中运行 TS 的步骤:使用命令 tsc index.ts 将 ts 文件转化为 js 文件。在页面中,使用 script 标签引入生成的 js 文件(注意是 js 文件)。<script src="./index.js"></script>问题:每次修改 ts 文件后,都要重新运行 tsc 命令将 ts 转化为 js 。解决方式:使用 tsc 命令的监视模式-----原创 2021-10-30 17:52:38 · 2119 阅读 · 0 评论 -
TypeScript - TS的类型推论
在 TS 中,某些没有明确指出类型的地方,类型推论会帮助提供类型。发生类型推论的2种常见场景:声明变量并初始化时决定函数返回值时注意:如果先声明变量后赋值,此时应该在声明变量时指定类型注解let age: numberage = 18// age = '' 报错...推荐:能省略类型注解的地方,就省略...原创 2021-10-30 17:11:29 · 157 阅读 · 0 评论 -
TypeScript - 对象
对象的类型注解TS 中的对象是结构化的,结构简单来说就是对象有什么属性或方法。在使用对象前,就可以根据需求,提前设计好对象的结构注意:多个键值对之间使用分号(;)分隔,并且分号可省略对象的结构化类型(类型注解):建立一种契约,约束对象的结构对象方法的类型注解箭头(=>)左边小括号中的内容:表示方法的参数类型。箭头(=>)右边的内容:表示方法的返回值类型。方法类型注解的关键点:1 参数 2 返回值接口直接在对象名称后面写类型注解的坏处:1 代码结构不简洁 2 无法复用类原创 2021-10-30 17:06:49 · 368 阅读 · 0 评论 -
TypeScript - 函数
形参和实参function fn(name: string, age: number) { }语法:形参名称: 类型注解,类似于变量声明,但是没有赋值实参必须符合形参的类型要求,否则会报错返回值注意:如果没有指定函数的返回值,那么,函数返回值的默认类型为 void(空,什么都没有)。// 指定返回值类型function fn(): 类型注解 { // 指定返回值 return 返回值}注意:返回值必须符合返回值类型的类型要求,否则会报错!return 可以单独使用(后面可以不跟原创 2021-10-30 16:31:40 · 60 阅读 · 0 评论 -
TypeScript - 数组
数组数组,是用于存放多个数据的集合。let names: string[] = ['一凡', '图图', '小多']注意:数组中,通常是相同类型的数据创建数组// 方法一(推荐)let names: string[] = []// 方法二(不推荐)let names: string[] = new Arralet names: string[] = new Array('一凡', '图图', '小多')// 相当于:let names: string[] = ['一凡', '图图'原创 2021-10-30 14:42:22 · 188 阅读 · 0 评论 -
TypeScript - VS 断点调试TS代码配置
VSCode - 断点调试配置注意:VSCode调试TS代码是需要配置的。配置步骤第一步:准备要调试的ts文件新建 a.ts 文件,作为要调试的ts文件console.log('1 准备开始执行 for 循环')for (let i: number = 1; i <= 3; i++) { console.log('..循环')}console.log('2 for 循环执行结束')第二步:添加调试配置打开调试窗口:点击左侧活动栏倒数第二个按钮(Debug)生成默认配置原创 2021-10-30 14:28:03 · 700 阅读 · 0 评论 -
TypeScript - 变量和数据类型
运算符也称为操作符,用来实现赋值(=)、算术运算、比较等功能的符号算术运算符算术运算符包含:加(+)、减(-)、乘(*)、除(/)加号的其他作用+ 号,不仅可以用于加法计算,还能实现字符串拼接规律:加号两边只要有一边是字符串,就执行字符串拼接注意:除加号以外,其他算术运算符只应该跟数字类型一起使用在字符串前面添加 + 号,可以将 string 转化为 number(字符串内容为数字时才有意义)console.log(2 - +'1')// +'1' 表示将 '1'(string) =>原创 2021-10-30 13:54:50 · 287 阅读 · 0 评论 -
TypeScript - 变量和数据类型
变量的使用变量的使用分为两步:1 声明变量并指定类型 2 给变量赋值。let age: number = 18;let 是 TS 的关键字,用来声明变量。age 是程序员自己定义的变量名称。: number 用来指定变量 age 为数值类型。注意:分号是可选的,可省略注意:声明变量的时候要指定变量的类型类型注解类型注解:是一种为变量添加类型约束的方式。约定了什么类型,就只能给变量赋什么类型的值代码中的 : number 就是类型注解变量命名规范变量名称只能出现:数字、字母原创 2021-10-30 09:55:52 · 130 阅读 · 0 评论 -
TypeScript - typescript 初识
TypeScript(简称:TS)是 JavaScript 的超集(JS 有的 TS 都有)。TypeScript = Type + JavaScript(为 JS 添加了类型系统)TypeScript 是微软开发的开源编程语言,设计目标是开发大型应用。可以在任何浏览器、任何计算机、任何操作系统上运行// TypeScript 代码:有明确的类型,即 : number (数值类型)let age: number = 18// JavaScript 代码:无明确的类型let age = 1原创 2021-10-27 16:50:21 · 102 阅读 · 0 评论