typescript
文章平均质量分 72
ts 学习笔记和一些案例
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
2023年了,来试试前端格式化工具
在大前端时代,前端的各种工具链穷出不断,有eslintprettierhuskycommitlint等, 东西太多有的时候也是trouble😂😂😂,怎么正确的使用这个是每一个前端开发者都需要掌握的内容,请上车🚗🚗🚗。原创 2023-02-10 23:07:36 · 1760 阅读 · 0 评论 -
redux ts(typescrip) reducer中action的类型检查
本人在写reducer中的action类的时候发现一些问题。为啥我的类型检查没有,过不了。后面实现了改功能,特在此记一笔。好记性不如烂笔头。效果我们就是要实现一个类似上图的效果,在每一个type中,action的类型是不一样。实现方式看下面的成功案例成功案例实现的业务场景,我想实现一个用户管理的功能,可以新增用户,删除,修改用户等。每一个功能都是独立的并且所需要的参数是不一样的,所以做了以下类型检查。公共类型// common.ts // 公共类型// 枚举每一个type类型。.原创 2021-04-30 08:50:03 · 1009 阅读 · 0 评论 -
redux-thunk ts(typescript)类型检查报错,通过不了
错误原因分析原因: 在dispatch的时候,dispatch的默认类型是必须包含一个 type属性的plian object 如下图:所以代码是对的,但是类型就是不匹配。解决办法:方法一既然 typescript 给我带来的麻烦,那我就不使用类型检查,一切any就行了效果方法二:我们使用ts的目的就是未来获取类型检查的,我怎么可能把 typescript 变成 anyscript?redux-thunk 默认给我们导出了两个类型ThunkAction:原创 2021-04-29 20:37:22 · 1066 阅读 · 0 评论 -
typescript(ts) 声明文件
什么是声明文件在typescript中存在两种文件后缀名,一种是 .ts,另一种是.d.ts结尾的文件,我们主要的代码都是写在以.ts文件结尾的文件中。而.d.ts结尾的文件就是声明文件。声明文件的作用我们都知道,ts 是 js 的超集,ts 是一个静态的类型检查系统,ts 比 js 多的就是类型检查,而实现类型检查的关键就是 ts 中的声明文件。所以声明文件的作用是为js 提供类型检查而存在的。声明文件存放的位置放置到tsconfig.json配置中include:[]中包含的目录中原创 2021-02-04 16:15:58 · 4288 阅读 · 0 评论 -
typescript(ts) 类型演算,类型推导
导言:我们都知道,ts 具有类型推导,并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型,那么这个需要怎么做呢?关键字主要的关键字有以下几个: typeof,in, keyof 等关键字typeof关键字大家看到typeof, 肯定会说 js 中已经存在了哇,但是ts 中的typeof 有不一样的用法:这里ts 在 类型检查的时候报错,typeof 用在类型检查的位置。所以,在这里typeof的作用是:获取某个数据的类型, 上面的.原创 2021-02-03 19:52:35 · 4164 阅读 · 0 评论 -
typescript(ts)面向对象之装饰器
装饰器概念装饰器是面向对象的概念(在java中叫做注解,早c#中叫做特征,英文名字是decorator在angular大量使用,react中也会用到JS支持装饰器,目前处于建议征集的第二阶段,翻阅网上的大量文章,发现17年的时候就开始有装饰器了,也一直都在意见征集阶段,直到现在也是一样的。ts 中需要使用这个需要在 配置文件ts.config.json 中开启 experimentalDecorators: true就能使用装饰器了。 装饰器的作用看下面的例子中:class A { c原创 2021-02-02 21:46:45 · 1385 阅读 · 0 评论 -
typescript(ts)实现俄罗斯小方块
先看效果原创 2021-01-30 18:58:41 · 616 阅读 · 0 评论 -
this指向约束
在JS中this指向的几种情况明确:大部分时候,this的指向取决于函数的调用方式如果直接调用函数(全局调用),this指向全局对象或undefined (启用严格模式)在es6的类中,默认是会自动开启严格模式的,上面的直接调用包括,先把函数保存到一个变量中,然后在执行,例如:var obj = {sayHello(){ console.log(this) }} var say = obj.sayHello; say()如果使用对象.方法调用,this指向对象本身如果是d原创 2021-01-26 15:12:16 · 398 阅读 · 0 评论 -
ts(typescript)面向对象之索引器
索引器 这个概念不是typescript 中提出的,而是c#中提出的什么是索引器我们都知道,ts 中 获取对象中的属性有好多种方式通过点的方式来进行获取通过属性表达式的方式进行获取通过获取对象的属性描述符进行获取我们获取属性的第二种方式,对象[值],使用成员表达式就叫做是索引器,索引器里面的内容不是ts 新增,这里只讨论如何ts 如何给索引器添加类型检查不用索引器存在的问题对象赋值绕过ts 检查解决办法在TS中,默认情况下,不对索引器(成员表达式)做严格的类型检查使用配置.原创 2021-01-26 11:11:55 · 2826 阅读 · 0 评论 -
在 TS 中如何实现类型保护?类型谓词了解一下
https://segmentfault.com/a/1190000022052209转载 2021-01-25 16:46:17 · 1038 阅读 · 0 评论 -
ts(typescript)面向对象之静态成员
ts(typescript)面向对象之静态成员类的静态成员不是ts提出的新语法,而是es6中里面提出的含义: 静态成员是指,附着在类上的成员(属于某个构造函数的成员),在ts 中的表现是在类中使用 static修饰符进行修饰的成员。例如:class User { // 静态属性 static users: User[] = []; constructor( public username: string, public password: string) { } /原创 2021-01-25 09:37:34 · 1861 阅读 · 2 评论 -
ts(typescript)面向对象之类的抽象类
含义抽象类是干啥的,为什么要抽象类?抽象(abstract)这个词本身理解起来就是客观不存在的,是一个概念上,一个泛词。例如:飞机,鸟,坦克等飞机大战也许都玩过,里面有好多飞机,有敌方的飞机,玩家飞机等。那么根据类的划分,我们可以划分敌方飞机类,玩家飞机类,但是我们从继承的角度仔细想一想,是不是有一些公共的部分,例如,飞机的名字,飞机的生命值,飞机的速度,攻击等一系列公共的属性和方法,就可以得出下面的类图#mermaid-svg-uaoNkb30xw1za8IU .label{font-fami原创 2021-01-23 14:15:03 · 983 阅读 · 0 评论 -
ts(typescript)面向对象之类的继承
ts(typescript)面向对象之类的继承类继承的作用继承可以描述类与类之间的关系,例如: 在斗地主的小游戏中,我们只看牌,牌里面有分4种花色的牌(除了大小王),♥,♠,♦,♣,我们可以知道♥的牌是牌,♠的牌是牌……,形如:在中文的描述种,什么是什么,例如 A 是 B,我们就可以理解成 A 是 B的子集(数学角度上)B 包含 A在程序编程思想中,如果A和B都是类,并且可以描述为A是B,则A和B形成继承关系:B是父类,A是子类B派生A,A继承自BB是A的基类,A是B的派生类如果A继原创 2021-01-23 13:31:50 · 2228 阅读 · 3 评论 -
ts(typescript) 字类 继承父类 在字类构造函数为啥需要先super()调用 分析
在今天写代码的过程中,我遇到一个这样的问题,字类继承父类为啥需要在字类的构造函数中使用 super()// 定义一个A类(父类),这里我以抽象类为例子abstract class A { x: number = 0; y: number = 0; abstract readonly c: string;}// 定义一个B类来继承抽象类,并且实现里面的抽象属性class B extends A { c: string; constructor() { super(.原创 2021-01-22 10:14:44 · 2704 阅读 · 0 评论 -
typescript (ts) 泛型初探
typescript (ts) 泛型初探泛型的定义:1.泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。2.就是一种不确定的数据类型,可以把运行时的问题提前到编译时期(java里是这么说的 我觉得在ts 应该同理的)3.简单粗暴的说不想丢失’ts’ 的类型检查语法直接在名称后写上<泛型名称>命名规范其中 T 代表 Type,在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T原创 2021-01-18 09:57:55 · 1349 阅读 · 0 评论 -
ts 手动实现 ts 中的map
ts 手动实现 ts 中的map实现的功能如下:按照键,删除对应的键值对 del()循环每一个键值对 forEach()得到当前键值对的数量 size判断某个键是否存在 has()重新设置某个键对应的值,如果不存在,则添加 set()清除键值对 clear()效果如下:代码如下:export interface Cb<K, V> { /** * 键值对的 key 和 val, 无返回 */ (key: K, val:原创 2021-01-17 09:53:48 · 4143 阅读 · 0 评论 -
ts(typescript) 类(class)初探
ts 类初探当大家看到typescript(ts) 中的类(class)时候,可能好多人都会想起面向对象,对的,面向对象是许多后台的一种编程思想,比如: 本人曾经接触的java, 里面就是用的是面向对象的思想。但是本文不讨论面向对象,值讨论ts 中 class 新增的语法,和一些使用方法以及注意事项。回顾es6中的类// 定义一个用户的类,里面有两个属性,名字和年龄class User { constructor(name, age) { this.sex = "男";原创 2021-01-16 10:06:04 · 4023 阅读 · 0 评论 -
typescript(ts) 类型兼容性 分析
TypeScript的核心原则之一是对值所具有的结构进行`类型检查`。 它有时被称做“`鸭式辨型法`(会走路、游泳和呱呱叫的鸟,或者是动物等的就是鸭子)”或“`结构性子类型化`”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。原创 2021-01-14 16:58:30 · 1237 阅读 · 1 评论 -
typescript(ts) interface 与 type 的异同
typescript(ts) interface 与 type 的异同看到网上已经有好多人介绍这两者的区别,本人是恰好学到这里,然后做点自己的学习笔记,给后面学习的小伙伴留下点足迹.话不多说,往下看。不同点语法上type 和 interface 的语法不一样,type 需要等号,而 interface 不需要等号// interface 声明的类型检查interface User { name: String age: number sayHello: () => void原创 2021-01-15 17:57:35 · 3819 阅读 · 0 评论 -
ts(typescript) 的模块化
ts(typescript) 模块化原创 2021-01-12 17:07:59 · 2604 阅读 · 0 评论 -
ts扩展类型
ts扩展类型枚举扩展类型:类型别名、枚举、接口、类枚举通常用于约束某个变量的取值范围。字面量和联合类型配合使用,也可以达到同样的目标。字面量类型的问题在类型约束位置,会产生重复代码。可以使用类型别名解决该问题。逻辑含义和真实的值产生了混淆,会导致当修改真实值的时候,产生大量的修改。// 定义一个类型别名type Sex = "男"|"女"// ... 此处有1w行代码,用到了男女这个sex = "男" 等// 当有一天,产品过来说,把男改成帅哥,女改成美女,我们可以cv进行原创 2021-01-11 10:33:00 · 2354 阅读 · 0 评论 -
ts(typescript) 类型约束
基本类型约束TS是一个可选的静态的类型系统,就是说,你在.ts文件中,用和不用ts的类型检查,都没有任何关系,因为ts是js的超集如何进行类型约束仅需要在 变量、函数的参数、函数的返回值位置加上:类型例如:let num: number = 5; // 类型检查数字类型const str: string = 'str'; // 类型检查为字符串类型const arr:number[] = [1,2,3] // 类型检查为数字数组,对于数组来说,ts会严格检查数组里面的每一个值是否符合,不符原创 2021-01-10 13:26:42 · 4190 阅读 · 0 评论 -
node环境搭建typescript 环境,懒人版
node环境搭建typescript上效果看这篇文章,你可以收获在node环境中,编写代码,自动运行,编译成js。安装库npm install typescript -D 我们要明白一个原理,ts(typescript) 是js的超集,生效的还是js,因此,ts所在的部分是编译成js,把js拉上了一个层次,使用ts就是在开发阶段编译成js,然后和js是一样的。ts 的作用 传送门安装可以使用局部安装或者全局安装,这里使用局部安装。安装好后,typescript会给我们提供一个命令, tsc,原创 2021-01-08 18:14:48 · 1311 阅读 · 0 评论 -
tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
搭建ts工程的时候,使用tsc指令报错报错内容如下: tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。这个问题的原因是: 由于我的typescript 是局部安装的,所以在控制台或者终端肯定是无法使用的, 控制台或者终端能使用的是我们电脑本地安装的命令或者是环境变量里面有的配置,例如: npm npx 等解决办法:方法1 全局安装typescrpit使用命令 npm install types原创 2021-01-08 16:26:16 · 23157 阅读 · 8 评论 -
TypeScript简介_TypeScript笔记1 转载
一.背景2010 – 微软团队开始开发2012 – 第一个公开版本发布(TypeScript 0.8)2013 – TypeScript 0.9 发布,支持泛型了2014 – TypeScript 1.0 发布,Visual Studio 2013 默认支持 TypeScript 了。同时,源码从CodePlex 迁移到 Github2017 – TypeScript 2.1 发布2018 – TypeScript 3.2 发布TypeScript 最初是个微软内部项目,叫 Strada转载 2021-01-08 09:28:13 · 360 阅读 · 0 评论