TypeScript
记录typescript相关知识
凯小默
专注前端领域开发。
展开
-
21 # 高级类型:条件类型
分布式条件类型(Distributive Conditional Types)是一种特殊类型的条件类型,它在处理联合类型时会表现出特定的行为。当条件类型被应用于联合类型时,如果联合类型中包含了带有类型参数的条件类型,那么 TypeScript 会自动将条件类型“分发”到联合类型的每个成员上,并将结果组合成一个新的联合类型。**Extract 跟 Exclude 相反, Exclude 是从类型 T 中过滤掉可以赋值给类型 U 的类型, Extract 是从类型 T 中可以抽取出赋值给 U 的类型。原创 2024-03-18 19:53:22 · 515 阅读 · 0 评论 -
20 # 高级类型:映射类型
映射类型本质上是一种预先定义的泛型接口,通常还会结合索引类型获取对象的属性和属性值,从而将一个对象映射成我们想要的结构。映射类型(Mapped Types)是一种强大的工具,用于从一个现有的类型中创建新类型。通过映射类型,我们可以在编译时基于旧类型创建新类型,而无需手动重复定义属性。上面三种称为同态,他们只会作用于 Obj 中的属性,不会引入新的属性。通过 Readonly 内置泛型接口。下面这种会创建新的属性,它是非同态的。把接口的所有属性变成可选的。比如:将所有属性变成只读。原创 2024-03-18 19:20:47 · 437 阅读 · 0 评论 -
19 # 高级类型:索引类型
是一种索引类型查询操作符,用于获取类型 T 的所有属性名的联合类型。它可以用于访问和操作对象类型的属性名称。表示类型 T 中索引为 K 的属性的类型。这种语法通常用于访问对象类型中特定属性的类型。可以使用索引来约束处理这种问题。原创 2024-03-18 18:56:37 · 445 阅读 · 0 评论 -
18 # 高级类型:交叉类型与联合类型
可区分联合类型(Discriminated Unions)是 TypeScript 中一种特殊的联合类型,通过一个共同的属性(称为 discriminant)来区分联合类型中的不同成员。方法二:利用 never 类型,检查 s 是不是 never 类型,如果是 never 类型,说明以前的分支都被的覆盖了,永远不会走到,如果不是 never 类型,说明有遗漏。运算符将多个类型组合到一起形成一个新的类型,新类型将包含所有原始类型的属性和方法。联合类型(Union Types)是指通过。原创 2024-03-14 21:08:04 · 367 阅读 · 0 评论 -
17 # 类型检查机制:类型保护
上面的跟会报错,因为lang是个联合类型,TypeScript 不能确定lang是什么类型。但是这种方案需要在每处都加,代码可读性差。而类型保护就是用来解决这个问题的。它可以提前对类型做出预判。原创 2024-02-01 20:25:10 · 473 阅读 · 0 评论 -
16 # 类型检查机制:类型兼容性
加个成员,两个变量就不兼容了,只有类型参数 T 被接口成员使用的时候才会影响泛型的兼容性。当一个类型 Y 可以被赋值给另一个类型 X 时,我们说类型 X 兼容类型 Y。函数重载:目标函数的参数要多余源函数的参数而且返回值要符合相应的要求。的时候, 字符型兼容 null 类型,null 是字符的子类型。:目标函数的返回值类型必须与源函数的返回值类型相同或为其子类型。X 兼容 Y :X(目标类型)= Y(源类型):目标的参数的个数一定要多余源函数的参数个数。对象类型:成员个数多的兼容个数少的(设置。原创 2024-01-31 20:32:12 · 491 阅读 · 0 评论 -
15 # 类型检查机制:类型推断
不需要指定变量的类型(函数的返回值类型),TypeScript 可以根据某些规则自动为其推断出一个类型。类型检查机制:TypeScript 编译器在做类型检查时,所秉承的一些原则,以及表现出的一些行为。作用:辅助开发,提高开发效率。原创 2024-01-23 20:35:03 · 393 阅读 · 0 评论 -
14 # 泛型:泛型类与泛型约束
改造一个上一节说的 log 函数,让其打印出参数的 length 属性,这个时候就会提示我们类型。这时我们需要用到泛型约束这个概念,我们先定义一个接口,然后让。上不存在属性 length。静态成员不能引用类类型参数。泛型可以约束类的成员。原创 2024-01-18 20:37:40 · 380 阅读 · 0 评论 -
13 # 泛型:泛型函数与泛型接口
any 类型丢失了一些信息,也就是类型之间的约束关系,它忽略了输入类型跟返回类型必须是一致的,我们无法获知这种约束福安息,这个时候就需要用到泛型。上面这里仅仅约束了一个函数,还可以用泛型来约束接口的其它成员,这样接口的所有成员都受到了泛型变量的约束。很多时候我们希望一个函数或者一个类支持多种数据类型,有很大灵活性。如果不指定类型,也可以在接口的定义中,指定一个默认的类型。我们不仅可以用泛型来定义一个函数,还定义一个函数类型。希望这个函数支持字符串数组,应该如何实现?泛型还可以用在接口中。原创 2024-01-17 20:24:33 · 454 阅读 · 0 评论 -
12 # 类与接口的关系
接口处了继承接口之外,还可以继承类。这就相当于接口把类的成员都抽象了出来,只有类的成员结构,没有具体的实现。接口在抽离类的成员的时候,不仅抽离了公共成员,还抽离了私有成员和受保护成员。接口的继承可抽离出可重用的接口。也可以将多个接口合并成一个接口。接口可以像类一样,相互继承,并且一个接口可以继承多个接口。一个接口可以约束类成员有哪些属性以及它们的类型。原创 2024-01-16 20:20:36 · 420 阅读 · 0 评论 -
11 # 类:抽象类与多态
所谓多态,就是在父类中定义一个抽象方法,在多个子类中对这个方法有不同的实现,在程序运行的时候,会根据不同对象执行不同的操作,这样就是实现了运行时的绑定。在继承的时候,this 的类型也可以表现出多态,这里的多态是指 this 既可以是父类型,也可以是子类型。抽象类的好处就是可以抽离出一些事物的共性,有利于代码的复用和扩展,另外抽象类也可以实现多态。类的成员方法可以直接返回一个 this,这样就可以很方便的实现链式调用。抽象类是不允许被实例化的,只能被继承。原创 2024-01-15 20:15:47 · 372 阅读 · 0 评论 -
10 # 类:继承和成员修饰符
给构造函数添加 protected, 这个类不能被实例化,只能被继承,相当于声明了一个基类。构造函数的参数也可以添加修饰符,作用就是自动将参数变为实例的属性,可以省略在类中的定义。类的私有成员,只能在类的本身调用,不能被类的实例调用,也不能被子类调用。给构造函数添加 private, 这个类不能被实例化,也不能被继承。类的静态成员,只能通过类名来调用,不能被类的实例调用。受保护成员,只能在类的本身和子类中调用,不能被类的实例调用。只读属性,一定要被初始化,不能被修改。原创 2023-12-11 23:48:56 · 319 阅读 · 0 评论 -
09 # 函数相关知识点梳理
4种方式:ts 对函数参数类型、个数有什么要求形参实参必须一一对应。如果要省略可使用可选参数:注意:必选参数不能位于可选参数后。为参数赋值默认值:必选参数之前,默认参数是不能省略的,必须明确的传入 来获取其默认值,必选参数之后的默认值可以不用传。参数不确定可以使用剩余参数函数重载先定义一系列名称相同的函数声明,声明列表定义完成后,需在类型最宽泛版本中实现这个重载原创 2023-12-11 23:46:36 · 244 阅读 · 0 评论 -
08 # 接口:函数类型接口
类型别名定义函数类型。原创 2023-12-04 19:58:50 · 135 阅读 · 0 评论 -
07 # 接口:对象类型接口
id: number;})data: [如果传入对象字面量的话,ts 会对额外的字段进行类型检查,sex 就会报错render({data: [})绕过这种检查的方法一共有三种第一种:就是上面赋值给一个变量,然后传入第二种:使用类型断言(明确告诉编译器我们的类型就是 Result,这样编译器就会绕过检查)render({data: [或者使用,建议使用 as,这种在 react 中会产生歧义data: [});第三种:使用字符串索引签名。原创 2023-12-04 19:58:01 · 173 阅读 · 0 评论 -
06 # 枚举类型
枚举的实现原理:反向映射:既可以使用 key 索引,也可以使用 value 索引。枚举:一组有名字的常量集合。(可以理解成手机里的通讯录:姓名-手机号)数字枚举与字符串枚举混用(不建议使用,容易引起混淆)默认取值从 0 开始,后面的成员递增。可以使用 ts 里的枚举类型来解决。字符串枚举不能进行反向映射。原创 2023-11-29 23:42:18 · 369 阅读 · 0 评论 -
05 # 基本类型
num 不能赋值为 undefined 和 null,需要开启。元组:是一种特殊的数组,它限定了数组元素的类型和个数。any 任意类型,不指定类型,可以任意的给其赋值。作用:相当于强类型语言中的类型声明。会提示报错,开发中不建议这样使用。never 永远不会有返回值的类型。void 没有任何返回值的类型。Symbol 具有唯一的值。原创 2023-11-29 19:14:51 · 226 阅读 · 0 评论 -
04 # 第一个 TypeScript 程序
创建配置文件,执行下面命令就会生成一个。,就可以执行下面命令查看帮助信息。执行下面命令编译该 ts 文件。原创 2023-11-28 21:11:37 · 605 阅读 · 0 评论 -
03 # 类型基础:动态类型与静态类型
静态类型语言:在编译阶段确定所有变量的类型编译阶段确定属性偏移量用偏移量访问代替属性名访问偏移量信息共享动态类型语言:在执行阶段确定所有变量的类型在程序运行时,动态计算属性偏移量需要额外的空间存储属性名所有对象的偏移量信息各存一份所以动态类型语言无论在时间还是空间都有比较多的性能损耗。美国加州大学的讲义中对强类型语言的定义如下强类型语言:不允许程序在发生错误后继续执行按照上面的定义,C/C++就是弱类型语言,因为它们没有对数组越界进行检查,一旦发生错误,程序就会终止。原创 2023-11-15 00:58:46 · 138 阅读 · 0 评论 -
02 # 类型基础:强类型与弱类型
在强类型语言中,当一个对象从调用函数传递到被调用函数时,其类型必须与被调用函数中声明的类型兼容 – Liskov, Zilles 1974强类型语言不允许改变变量的数据类型,除非进行强制类型转换比如下面 Java 里不能将布尔类型转化为整型下面这个是 Java 进行了强制类型转换,将字符 a 转为了 ASCII 值在弱类型语言中,变量可以被赋予不同的数据类型下面就是 JavaScript 中例子:变量可以进行不同类型的赋值。原创 2023-11-15 00:18:57 · 245 阅读 · 0 评论 -
01 # 重塑类型思维
根据官方的定义,它是拥有类型系统的 JavaScript 的超集,可以编译成纯 JavaScript。类型检查:TypeScript 会在编译代码时进行严格的静态类型检查语言扩展:TypeScript 会包括来自 ECMAScript 6 和未来提案中的特性工具属性:TypeScript 能够编译成标准的 JavaScript。原创 2023-11-15 00:00:13 · 191 阅读 · 0 评论 -
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
每次调用change都可以修改到食物的位置,让其在stage里随机显示。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。我们以demo3的项目为基础,可以复制一份过来。然后添加postcss处理兼容性问题。在这个基础上添加less相关的处理。最后引入控制器实例化即可。最后配置webpack。原创 2022-10-08 03:12:13 · 1471 阅读 · 0 评论 -
【TypeScript教程】# 15:泛型
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。在定义函数或是类时,如果遇到类型不明确就可以使用泛型。可以直接调用具有泛型的函数。比如定义了一个泛型T。原创 2022-10-07 07:20:10 · 183 阅读 · 0 评论 -
【TypeScript教程】# 14:属性的封装
现在属性是在对象中设置的,属性可以任意的被修改,属性可以任意被修改将会导致对象中的数据变得非常不安全。private私有属性, 私有属性只能在类内部进行修改,通过在类中添加方法使得私有属性可以被外部访问。TS可以在属性前添加属性的修饰符,public 修饰的属性可以在任意位置访问(修改)默认值。protected受包含的属性, 只能在当前类和当前类的子类中访问(修改)尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。可以直接将属性定义在构造函数中。原创 2022-10-07 06:54:03 · 278 阅读 · 0 评论 -
【TypeScript教程】# 13:接口
接口用来定义一个类结构,用来定义一个类中应该包含哪些属性和方法,同时接口也可以当成类型声明去使用,接口可以在定义类的时候去限制类的结构。定义类时,可以使类去实现一个接口,实现接口就是使类满足接口的要求。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。原创 2022-10-07 05:57:58 · 173 阅读 · 0 评论 -
【TypeScript教程】# 12:抽象类
以 abstract 开头的类是抽象类,抽象类和其他类区别不大,只是不能用来创建对象,抽象类就是专门用来被继承的类。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。原创 2022-10-05 06:29:19 · 342 阅读 · 0 评论 -
【TypeScript教程】# 11:super关键字
如果在子类中写了构造函数,在子类构造函数中必须对父类的构造函数进行调用。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。在类的方法中super就表示当前类的父类。原创 2022-10-05 06:12:50 · 667 阅读 · 0 评论 -
【TypeScript教程】# 10:继承简介
通过继承可以将多个类中共有的代码写在一个父类中,这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法。如果在子类中添加了和父类相同的方法,则子类方法会覆盖掉父类的方法,这种子类覆盖掉父类方法的形式,我们称为方法。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。如果希望在子类中添加一些父类中没有的属性或方法直接加就行。使用继承后,子类将会拥有父类所有的方法和属性。原创 2022-10-05 05:58:46 · 195 阅读 · 0 评论 -
【TypeScript教程】# 9:构造函数和this
在实例方法中,this 就表示当前当前的实例,在构造函数中当前对象就是当前新建的那个对象,可以通过this向新建的对象中添加属性,在方法中可以通过this来表示当前调用方法的对象。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。可以使用 constructor 定义一个构造器方法;原创 2022-10-05 05:36:38 · 395 阅读 · 0 评论 -
【TypeScript教程】# 8:类的简介
class 类名 {属性名 : 类型;constructor(参数 : 类型) {this . 属性名 = 参数;} 方法名() {... . } }console . log(` 大家好,我是 ${ this . name } `);} }${this.console . log(` 大家好,我是 ${ this . name } `);} }}console . log(` 大家好,我是 ${ this . name } `);} }原创 2022-10-05 05:13:17 · 213 阅读 · 0 评论 -
【TypeScript教程】# 7:面向对象简介
面向对象是程序中一个非常重要的思想,面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。操作浏览器要使用 window 对象操作网页要使用 document 对象操作控制台要使用 console 对象一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象, 汽车模型是对具体汽车的抽象等等。原创 2022-10-04 21:39:38 · 510 阅读 · 0 评论 -
【TypeScript教程】# 6:使用webpack打包ts代码
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。然后添加一个 index.html 模板。成功之后就会自动帮我们打开浏览器访问页面。安装内置服务器,实时更新,方便访问项目。但是这里有个问题,就是浏览器打开会报错。不设置就不知道哪些模块可以被引用。index.ts 添加下面代码。需要配置一下不使用箭头函数。添加 babel 加载器。自动生成html文件。原创 2022-10-04 20:06:24 · 824 阅读 · 2 评论 -
【TypeScript教程】# 5:TS编译选项
将代码合并为一个文件,设置 outFile 后,所有的全局作用域中的代码会合并到同一个文件中,指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。怎么知道是这些值的,我们可以输入错误的信息,然后 tsc 报错。指定被编译文件的列表,只有需要编译的文件少时才会用到。用来设置编译后的文件是否使用严格模式,默认false。target 用来指定ts被编译为的ES的版本。outDir 用来指定编译后文件所在的目录。列表中的文件都会被TS编译器所编译。定义希望被编译文件所在的目录。原创 2022-10-04 03:37:42 · 1357 阅读 · 0 评论 -
【TypeScript教程】# 4:TS中类型
枚举是TypeScript为数不多的不是JavaScript类型级扩展的特性之一。使用枚举可以更容易地记录意图,或创建一组不同的用例。unknown 表示未知类型的值,实际上:就是一个类型安全的any。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。void用来表示空,以函数为例,就表示没有返回值的函数。never 表示永远不会返回结果,比如。来指定对象中可以包含哪些属性。object表示一个js对象。元组,元组就是固定长度的数组。设置函数结构的类型声明。可以先类型判断在赋值。原创 2022-10-03 03:42:30 · 682 阅读 · 0 评论 -
【TypeScript教程】# 3:TS的类型声明
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。原创 2022-10-03 00:45:05 · 754 阅读 · 0 评论 -
【TypeScript教程】# 2:TS开发环境搭建
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。执行完之后,同级目录下就会编译出一个js文件。输入 tsc 就会出现相关信息。原创 2022-10-02 23:35:05 · 275 阅读 · 0 评论 -
【TypeScript教程】# 1:TS简介
TypeScript是一个以JavaScript为基础构建的JavaScript的超集语言。尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。原创 2022-10-02 17:50:43 · 314 阅读 · 0 评论 -
【TypeScript教程】学习笔记16篇(完结)
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。原创 2022-10-02 00:47:06 · 479 阅读 · 0 评论