TypeScript
文章平均质量分 68
没有介绍
render-ydb
日常分享一些有趣、有用的前端知识。前端界一个普通的码农,目前就职于阿里巴巴。
展开
-
18.TypeScript中的声明合并
介绍TypeScript中有些独特的概念可以在类型层面上描述JavaScript对象的模型。 这其中尤其独特的一个例子是“声明合并”的概念。 理解了这个概念,将有助于操作现有的JavaScript代码。 同时,也会有助于理解更多高级抽象的概念。对本文件来讲,“声明合并”是指编译器将针对同一个名字的两个独立声明合并为单一声明。 合并后的声明同时拥有原先两个声明的特性。 任何数量的声明都可被合并;不局限于两个声明。基础概念TypeScript中的声明会创建以下三种实体之一:命名空间,类型或值。 创建命名原创 2021-10-26 21:57:40 · 130 阅读 · 0 评论 -
17.映射类型
一个常见的任务是将一个已知的类型每个属性都变为可选的:interface PersonPartial { name?: string; age?: number;}或者我们想要一个只读版本:interface PersonReadonly { readonly name: string; readonly age: number;}这在JavaScript里经常出现,TypeScript提供了从旧类型中创建新类型的一种方式 — 映射类型。 在映射类型里,新类型原创 2021-10-25 23:04:10 · 580 阅读 · 0 评论 -
16.索引类型(Index types)
使用索引类型,编译器就能够检查使用了动态属性名的代码。 例如,一个常见的JavaScript模式是从对象中选取属性的子集。function pluck(o, names) { return names.map(n => o[n]);}下面是如何在TypeScript里使用此函数,通过 索引类型查询和 索引访问操作符:function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] { return names原创 2021-10-25 22:51:49 · 320 阅读 · 0 评论 -
15.多态的 this类型
多态的 this类型表示的是某个包含类或接口的 子类型。 这被称做 F-bounded多态性。 它能很容易的表现连贯接口间的继承,比如。 在计算器的例子里,在每个操作之后都返回 this类型:class BasicCalculator { public constructor(protected value: number = 0) { } public currentValue(): number { return this.value; } public原创 2021-10-25 22:43:11 · 188 阅读 · 0 评论 -
14.可辨识联合(Discriminated Unions
可辨识联合你可以合并单例类型,联合类型,类型保护和类型别名来创建一个叫做 可辨识联合的高级模式,它也称做 标签联合或 代数数据类型。 可辨识联合在函数式编程很有用处。 一些语言会自动地为你辨识联合;而TypeScript则基于已有的JavaScript模式。 它具有3个要素:具有普通的单例类型属性— 可辨识的特征。一个类型别名包含了那些类型的联合— 联合。此属性上的类型保护。interface Square { kind: "square"; size: number;}i原创 2021-10-25 22:41:01 · 161 阅读 · 0 评论 -
13.TypeScript中的类型别名
类型别名类型别名会给一个类型起个新名字。 类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { ret原创 2021-10-21 21:45:44 · 431 阅读 · 0 评论 -
11.TypeScript中的联合类型
联合类型(Union Types)联合类型与交叉类型很有关联,但是使用上却完全不同。 偶尔你会遇到这种情况,一个代码库希望传入 number或 string类型的参数。 例如下面的函数:function padLeft(value: string, padding: any) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof原创 2021-10-18 22:39:16 · 431 阅读 · 0 评论 -
12.TypeScript中的交叉类型
交叉类型(Intersection Types)原创 2021-10-17 22:14:55 · 112 阅读 · 0 评论 -
10.TypeScript中的类型推断
类型推断TypeScript 可以根据一些简单的规则来推断(然后检查)变量的类型。这节介绍TypeScript里的类型推论。即,类型是在哪里如何被推断的。基础TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型。如下面的例子:let x = 3; // x被推断为number类型变量x的类型被推断为数字。 这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时。这是一个类型从右到左“流动”的示例。大多数情况下,类型推论是直截了当地。 后面的小节,我们会浏览类型原创 2021-10-16 23:01:53 · 685 阅读 · 0 评论 -
9.TypeScript中的泛型
介绍软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。设计泛型关键动机是在成员之间提供有意义的类型约束,这些成员可以是类的实例成员,类的方法,函数的参数,函数返回值。泛型之Hello World下面来创建第一个使用泛型的例子:iden原创 2021-10-16 16:51:14 · 172 阅读 · 0 评论 -
8.TypeScript中的枚举
枚举使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。数字枚举首先我们看看数字枚举,如果你使用过其它编程语言应该会很熟悉。enum Direction { Up = 1, Down, Left, Right}如上,我们定义了一个数字枚举, Up使用初始化为 1。 其余的成员会从 1开始自动增长。 换句话说, Direction.Up的值为 1, Down为 2, Left原创 2021-10-14 22:20:25 · 1138 阅读 · 0 评论 -
7.TypeScript中的类
什么是JavaScript中的类对JavaScript中的类还不了解的,请查看“JavaScript中的类”。TypeScript中的类TypeScript在JavaScript中的类基础上,新添了一些内容,并不是JavaScript中关于新内容,只是在TypeScript中给了我们新的语法,最后都是编译成JavaScript。公共,私有与受保护的修饰符在TypeScript中我们可以使用一些访问修饰符来约束类的成员。public在TypeScript里,成员都默认为 public。你也可以明原创 2021-10-14 00:03:00 · 161 阅读 · 0 评论 -
6.TypeScript中的函数
函数函数是JavaScript应用程序的基础。 它帮助你实现抽象层,模拟类,信息隐藏和模块。 在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。函数类型为函数定义类型让我们为函数添加类型:function add(x: number, y: number): number { return x + y;}let myAdd = function(x:原创 2021-10-10 23:16:37 · 250 阅读 · 0 评论 -
5.TypeScript中的接口
TypeScript中的接口接口是TypeScript中一个较为重要的知识点,它可以用来表示JavaScript中的任意类型的结构接口。鸭子模型在此之前,可以了解一下非常出名的“鸭子模型”理论:如果一个东西看起来像鸭子,能像鸭子一样走路,又可以像鸭子一样叫,那么这个东西就可以叫做鸭子。这里的鸭子模型就可以作为接口,只要你代码中的数据结构满足了这个接口的要求,那么这个数据结构就变成了一个鸭子。接口初探下面通过一个简单示例来观察接口是如何工作的:const duck: { color: string原创 2021-10-09 23:34:50 · 395 阅读 · 0 评论 -
4.TypeScript中数据类型的表示
TypeScript中数据类型的表示JavaScript中数据类型TypeScript都可以支持,同时TypeScript中还做了类型的扩展,但是最后运行的都是编译后的JavaScript代码。数字(Number)和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。let decLiteral: number = 6;let原创 2021-10-08 22:40:02 · 174 阅读 · 0 评论 -
2.为什么使用TypeScript
为什么使用TypeScript我觉得TypeScript最重要的就是约束了我们的JavaScript代码。原创 2021-10-01 21:19:19 · 200 阅读 · 0 评论 -
3.TypeScript的安装
TypeScript的安装安装TypeScript步骤如下:确保有Node.Js环境,没有的话,首先需要安装Node。使用 npm install -g typescript 安装,当然你也可以选择不在全局安装。检查安装当你安装以后,可以输入以下命令查看TypeScript是否安装成功:如果有内容输出,那么代表你安装正确,可以去使用了。TypeScript的简单使用可以使用一个简单的例子,来感受一下TypeScript的魔法:index.tsconst printStr: stri原创 2021-10-01 21:44:41 · 280 阅读 · 0 评论 -
1.什么是TypeScript
什么是TypeScript官方的解释是TypeScript是JavaScript的一种超集。我的理解是TypeScript就是JavaScript的一种特别的使用形式,这个形式中包括了一些高级的使用方式(这些方式是原生JavaScript所不具备的)。TypeScript就是JavaScriptTypeScript可以通过编译器直接转换成JavaScript代码。所以我们可以随心所欲按照TypeScript规定的写法来写TypeScript,至于怎么转化就交给TypeScript编译器吧。你的所有J原创 2021-09-30 22:09:33 · 1340 阅读 · 0 评论