![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
typeScript
文章平均质量分 57
小满zs
我是真菜
展开
-
typescript封装LocalStorage并支持过期时间
在我们使用cookie的时候是可以设置有效期的,但是本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费,那我们可以把进行二次封装实现该方案。原创 2023-01-15 01:50:46 · 6444 阅读 · 7 评论 -
学习TypeScript28(infer 递归)
具体思路 首先使用泛型约束 约束只能传入数组类型的东西 然后从数组中提取第一个,放入新数组的末尾,反复此操作,形成递归 满足结束条件返回该类型。希望通过一个 ts 工具变成。原创 2022-08-21 12:41:15 · 3481 阅读 · 8 评论 -
学习TypeScript27(infer 类型提取)
我们用infer 实现四个简单的例子。原创 2022-08-13 02:20:20 · 3598 阅读 · 1 评论 -
学习TypeScript26(TS进阶用法infer )
infer 是TypeScript 新增到的关键字 充当占位符我们来实现一个条件类型推断的例子定义一个类型 如果是数组类型 就返回 数组元素的类型 否则 就传入什么类型 就返回什么类型type Infer<T> = T extends Array<any> ? T[number] : Ttype A = Infer<(boolean | string)[]>type B = Infer<null>使用inter 修改type原创 2022-01-31 16:08:50 · 4430 阅读 · 11 评论 -
学习TypeScript25(TS进阶用法-泛型工具2)
Readonly我们昨天学的Partial 很像只是把? 替换成了 Readonlytype Readonly<T> = { readonly [P in keyof T]: T[P];};keyof 是干什么的?in 是干什么的?? 是将该属性变为可选属性T[P] 是干什么的?1 keyof我们讲过很多遍了 将一个接口对象的全部属性取出来变成联合类型2 in 我们可以理解成for in P 就是key 遍历 keyof T 就是联合类型的每一项原创 2022-01-31 11:19:45 · 4626 阅读 · 5 评论 -
学习TypeScript24(TS进阶用法-泛型工具)
泛型工具是一组预定义的泛型类型和操作符,用于操作和转换类型。它们可以帮助我们编写更灵活、更通用的代码,并提高代码的可读性和可维护性。原创 2022-01-30 20:38:29 · 4875 阅读 · 1 评论 -
学习TypeScript进阶类型兼容
所谓的类型兼容性,就是用于确定一个类型是否能赋值给其他的类型。typeScript中的类型兼容性是基于的(也就是形状),如果A要兼容B 那么A至少具有B相同的属性。原创 2023-02-11 12:23:02 · 5515 阅读 · 0 评论 -
学习TypeScript类型守卫
结合题目实现实现一个函数支持任意类型如果是对象,就检查里面的属性,如果里面的属性是number就取两位,如果是string就去除左右空格如果是函数就执行let value;value()})fn(obj)乍一看没啥问题 一运行就报错他说找不到a当函数被单独调用时(例如 value()),函数内部的 this 会指向全局对象(在浏览器环境下是 window)修改如下let value;data[key]() //修改这儿})fn(obj)第一个问题解决了。原创 2023-12-27 17:13:23 · 1796 阅读 · 1 评论 -
学习TypeScript23(TS进阶用法proxy & Reflect)
学习proxy对象代理Proxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)target要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p的行为。handler.get()本次使用的get属性读取操作的捕捉器。handler.set()本次使用的set属性设置操作的捕捉器。...原创 2022-01-29 11:45:22 · 7933 阅读 · 2 评论 -
学习typeScript(weakMap,weakSet,set,map)
在es5的时候常用的Array object ,在es6又新增了两个类型,Set和Map,类似于数组和对象。原创 2023-03-26 14:02:14 · 6628 阅读 · 10 评论 -
学习TypeScript22(实战TS编写发布订阅模式)
概述什么是发布订阅模式,其实小伙伴已经用到了发布订阅模式例如addEventListener,Vue evnetBus都属于发布订阅模式简单来说就是 你要和 大傻 二傻 三傻打球,大傻带球,二傻带水,三傻带球衣。全都准备完成后开始打球。思维导图首先 需要定义三个角色 发布者 订阅者 调度者具体代码on订阅/监听emit 发布/注册once 只执行一次off解除绑定interface EventFace { on: (name: string, c原创 2022-01-28 16:56:39 · 6303 阅读 · 5 评论 -
学习TypeScript21(webpack构建ts+vue3项目)
安装依赖1.全局安装rollup npm install rollup-g2.安装TypeScript npm install typescript -D3.安装TypeScript 转换器 npm installrollup-plugin-typescript2 -D4安装代码压缩插件 npm install rollup-plugin-terser -D5 安装rollupweb服务 npm install rollup-plugin-serve -D6 安装热更新 npm...原创 2022-01-26 21:26:10 · 12505 阅读 · 6 评论 -
学习TypeScript20(装饰器Decorator)
装饰器是一项实验性特性,在未来的版本中可能会发生改变若要启用实验性的装饰器特性,你必须在命令行或tsconfig.json里启用编译器选项装饰器装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上。首先定义一个类class A { constructor() { }}定义一个类装饰器函数他会把ClassA的构造函数传入你的watcher函数当做第一个参数const watcher: ClassDecorator = (tar...原创 2022-01-21 23:14:34 · 7708 阅读 · 7 评论 -
学习TypeScript19(Mixins混入)
TypeScript 混入 Mixins 其实vue也有mixins这个东西 你可以把他看作为合并1.对象混入可以使用es6的Object.assign 合并多个对象此时people 会被推断成一个交差类型 Name & Age & sex;interface Name { name: string}interface Age { age: number}interface Sex { sex: number}let people1:.原创 2022-01-20 21:06:38 · 7369 阅读 · 3 评论 -
学习TypeScript18(声明文件d.ts)
声明文件当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。declare var声明全局变量 declare function声明全局方法 declare class声明全局类 declare enum声明全局枚举类型 declare namespace声明(含有子属性的)全局对象 interface和type声明全局类型 export导出变量 export namespace导出(含有子属性的)对象 export default...原创 2022-01-19 20:49:23 · 9053 阅读 · 3 评论 -
学习TypeScript17(模块解析)
前端模块化规范是有非常多的在es6模块化规范之前有UMD -> UMD是AMD和CommonJS的糅合es6模块化规范出来之后上面这些模块化规范就用的比较少了现在主要使用 import export。原创 2022-01-18 11:53:43 · 7647 阅读 · 13 评论 -
学习TypeScript16(namespace命名空间)
我们在工作中无法避免全局变量造成的污染,TypeScript提供了namespace 避免这个问题出现内部模块,主要用于组织代码,避免命名冲突。 命名空间内的类默认私有 通过export暴露 通过namespace关键字定义ok,让我们看一个小例子命名空间中通过export将想要暴露的部分导出如果不用export 导出是无法读取其值的namespace a { export const Time: number = 1000 export const fn ...原创 2022-01-17 18:11:30 · 10164 阅读 · 3 评论 -
学习TypeScript15(tsconfig.json配置文件)
生成tsconfig.json 文件这个文件是通过tsc --init命令生成的配置详解"compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以提高编译的速度 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印诊断信息 "target": "E原创 2022-01-16 16:49:38 · 9822 阅读 · 3 评论 -
学习TypeScript14(泛型)
泛型在TypeScript 是很重要的东西 例如vue3 是用ts编写的 里面用到了非常多的泛型ok:我们看一个小例子我写了两个函数一个是数字类型的函数,另一个是字符串类型的函数,其实就是类型不同,实现的功能是一样的,这时候我们就可以使用泛型来优化function num (a:number,b:number) : Array<number> { return [a ,b];}num(1,2)function str (a:string,b:string) : A原创 2022-01-14 18:42:41 · 12203 阅读 · 6 评论 -
学习TypeScrip13(symbol类型)
Symbols · TypeScript中文网 · TypeScript——JavaScript的超集 ts官网Symbol自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。symbol类型的值是通过Symbol构造函数创建的。可以传递参做为唯一标识 只支持 string 和 number类型的参数let sym1 = Symbol();let sym2 = Symbol("key"); // 可选的字符串keySymbo原创 2022-01-12 22:22:58 · 9013 阅读 · 4 评论 -
学习TypeScrip12(never类型)
TypeScript 将使用 never 类型来表示不应该存在的状态(很抽象是不是)// 返回never的函数必须存在无法达到的终点// 因为必定抛出异常,所以 error 将不会有返回值function error(message: string): never { throw new Error(message);}// 因为存在死循环,所以 loop 将不会有返回值function loop(): never { while (true) { }}n原创 2022-01-10 18:29:47 · 7835 阅读 · 8 评论 -
学习TypeScrip11(类型推论|类型别名)
什么是类型推论let str = "小满zs"1.我声明了一个变量但是没有定义类型TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论所以TS帮我推断出来这是一个string类型不能够在赋值给别的类型2.如果你声明变量没有定义类型也没有赋值这时候TS会推断成any类型可以进行任何操作类型别名type 关键字(可以给一个类型定义一个名字)多用于符合类型定义类型别名type str = stringlet s:st...原创 2022-01-09 20:21:38 · 9697 阅读 · 8 评论 -
学习TypeScrip10(枚举类型)
在javaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型原创 2022-01-08 23:36:52 · 10186 阅读 · 4 评论 -
学习TypeScrip9(元组类型)
如果需要一个固定大小的不同类型值的集合,我们需要使用元组。元组就是数组的变种元组(Tuple)是固定数量的不同类型的元素的组合。元组与集合的不同之处在于,元组中的元素类型可以是不同的,而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值,可以把这多个值作为元组返回,而不需要创建额外的类来表示。let arr:[number,string] = [1,'string']let arr2: readonly [number,boolean,string,原创 2022-01-06 21:29:14 · 9179 阅读 · 5 评论 -
学习TypeScrip8(Class类)
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。//定义类class Person { constructor () { } run () { }}1.ok!那我们在TS原创 2022-01-06 14:55:08 · 14177 阅读 · 13 评论 -
学习TypeScrip7(内置对象)
JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。ECMAScript 的内置对象Boolean、Number、’Error、Date、RegExplet b: Boolean = new Boolean(1)console.log(b)let n: Number = new Number(true)console.log(n)let s: String = new String('11we')console.log(s)let d原创 2022-01-02 23:14:23 · 13785 阅读 · 12 评论 -
学习TypeScrip6(类型断言 | 联合类型 | 交叉类型)
联合类型//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机//所以我们就可以使用联合类型支持座机字符串let myPhone: number | string = '010-820'//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值let myPhone: number | string = true函数使用联合类型、const fn = (something:number | boolean):boolean => {原创 2021-12-28 16:47:34 · 13910 阅读 · 7 评论 -
学习TypeScrip5(函数扩展)
函数的类型//注意,参数不能多传,也不能少传 必须按照约定的类型来const fn = (name: string, age:number): string => { return name + age}fn('张三',18)函数的可选参数?//通过?表示该参数为可选参数const fn = (name: string, age?:number): string => { return name + age}fn('张三')函数参数的默认值c原创 2021-12-28 14:53:15 · 27231 阅读 · 9 评论 -
学习TypeScrip4(数组类型)
数组的类型1.类型[ ]//类型加中括号let arr:number[] = [123]//这样会报错定义了数字类型出现字符串是不允许的let arr:number[] = [1,2,3,'1']//操作方法添加也是不允许的let arr:number[] = [1,2,3,]arr.unshift('1')数组泛型规则 Array<类型>let arr:Array<number> = [1,2,3,4,5]用接口表示数组一般用来描述类数.原创 2021-12-27 17:49:43 · 14754 阅读 · 10 评论 -
学习TypeScrip3(接口和对象类型)
对象的类型在typescript中,我们定义对象的方式要用关键字interfaces(接口),我的理解是使用interfaces来定义一种约束,让数据的结构满足约束的格式。定义方式如下://这样写是会报错的 因为我们在person定义了a,b但是对象里面缺少b属性//使用接口约束的时候不能多一个属性也不能少一个属性//必须与接口保持一致interface Person { b:string, a:string}const person:Person = { a原创 2021-12-27 17:04:45 · 19305 阅读 · 6 评论 -
学习TypeScript 加餐环节
这个类型是跟原型链有关的原型链顶层就是Object,所以值类型和引用类型最终都指向Object,所以他包含所有类型。原创 2022-11-27 01:30:25 · 6757 阅读 · 3 评论 -
学习TypeScrip2(任意类型)
Any 类型 和 unknow1.没有强制限定哪种类型,随时切换类型都可以let anys:any = 123anys = '123'anys = true2.声明变量的时候没有指定任意类型默认为anylet anys;anys = '123'anys = true3.弊端如果使用any 就失去了TS类型检测的作用4.unknow unknow类型比any更加严格当你要使用any 的时候可以尝试使用unknow//这样写会报错unknow类型不能作为子类型只能作为.原创 2021-12-27 14:20:42 · 18204 阅读 · 4 评论 -
学习TypeScrip1(基础类型)
基础类型:Boolean、Number、String、null、undefined以及 ES6 的Symbol和 ES10 的BigInt。字符串类型字符串是使用string定义的let a:string = '123'//普通声明//也可以使用es6的字符串模板let str:string = `dddd${a}`其中`用来定义ES6 中的模板字符串,${expr}用来在模板字符串中嵌入表达式。数字类型支持十六进制、十进制、八进制和二进制;le......原创 2021-12-27 11:24:51 · 26523 阅读 · 15 评论