zoukankan      html  css  js  c++  java
  • 一文学会 TypeScript 的 82% 常用知识点(下)

    一文学会 TypeScript 的 82% 常用知识点(下)

    前端专栏 2019-11-23 18:39:08
    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得不学的技能,我们必须掌握。

    在上篇「一文学会 TypeScript 的 82% 常用知识点(上)」中,主要介绍了 TS 的基本类型,引用类型、类型断言、接口等基础知识点。本篇对剩下对内容进行讨论,包括:类、函数、泛型。

    如果 TS 的基础薄弱,建议先阅读上篇,大概二十分钟即可入门。

    五、类

    类在上篇有所提及,这里作进一步了解。

    类的典型结构

    包括属性、方法、构造函数。使用关键字 new 创建类的实例。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.1 类的继承

    使用关键字 extends 定义类的继承。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.2 类的成员修饰符

    5.2.1 public

    类的成员修饰符默认是 public,也可以显式声明。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    上述代码中,属性 a 和 b 均被声明为公共的。

    5.2.2 private

    将类的成员声明为私有的,即只有类内部访问。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    TS 是结构性类型系统(鸭式辨形),如果两种类型的结构相同,一般情况下,TS 会认为它们是兼容的。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    可是,当类的成员带有 private 或 protected 修饰符时,情况却不一样。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    上述代码中,虽然看上去它们的结构相同。但是,当一个类的成员中存在 private 或 protected 时,如果需要另一个类与它兼容,则需要两个类的声明来源于同一份声明,例如通过继承。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.2.3 protected

    修饰符 protected 和 private 类似,区别在于使用 protected 修饰的成员,在派生类可以访问。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.2.4 readonly

    修饰符 readonly 将属性设置为只读。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    将属性设置为只读,只能在初始化时候定义其值,定义后不能修改。

    5.2.5 static

    在类类型中,我们区分了类的静态部分和类的实例部分。修饰符 static 将类成员声明为静态成员。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.2.6 抽象类

    我们创建基类时,如果不希望基类能被实例化,可以使用 protected 修饰符。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    更普遍的做法是,使用 abstract 修饰符。abstract 能定义抽象类和抽象类中的抽象方法。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    5.2.7 getter 和 setter

    很多时候,对某个属性读取时,同时需要对其进行处理,例如。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    更加简单的办法是,通过 存储器 处理。

    getter 和 setter 统称存取器,其实在 ES5 就已经存在,很多朋友没有留意。如果对存取器不熟悉的,也可以通过 TS 来理解。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    六、函数

    在 TS 中,有几种方式定义函数类型。

    6.1 函数签名

    利用上文提到的函数签名来定义函数类型。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    6.2 完整的函数类型

    除了使用函数签名外,还可以直接对函数进行类型描述。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    但是,这种方式毫无疑问是太繁琐了,TS 存在类型推断的功能,它能根据等号一侧已存在的函数类型,而推断出另一侧的函数类型,从而简化代码。

    6.3 类型推断

    函数推断简化代码

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    6.4 可选参数

    在 JS 中,参数都是可选的,如果函数声明了参数,但是实际没有传参,则参数值是 undefined。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    默认情况下, TS 要求参数是必须的,函数声明了参数,就应该传进对应的参数。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    但确实存在某个参数可能存在,可能不存在的情况。这时候就需要用到可选参数了。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    值得注意的是,可选参数必须跟在必须参数之后。

    6.5 默认参数

    在 ES6 中,可以给参数设定默认值。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    而在 TS 中,默认参数的特性也是和 ES6 一致,而默认参数的类型是:默认值和 undefined 的联合类型。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    6.6 剩余参数

    在 ES6 中,引入了剩余参数,代表由剩余所有参数组成的参数数组。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    在 TS 中给剩余参数添加类型,和普通参数接近,区别在于剩余参数肯定是数组类型。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    6.7 函数重载

    函数根据传入不同的参数而返回不同的数据,这是十分普遍的情况。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    如何对这种情况进行类型描述呢?有些朋友可能会想到使用联合类型进行处理。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    但是,这样不能很好地描述输入和输出类型的关系。

    在上述例子中,参数和返回存在对应关系:参数是 number 类型,则返回 boolean,参数是 boolean 类型,则返回 number,其他则返回 undefined。

    此时,我们可以运用函数重载描述这些对应关系:

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    上述代码中,定义了三个 foo 函数的重载,需要注意两点。

    1. 具体的函数声明不属于重载部分,即 function foo(a: any): any 并不是重载,而是具体的函数声明,所以例子中只有三个函数重载;
    2. 当匹配重载列表时候,是根据定义时候的顺序由上到下匹配的。在例子中,传入参数是 undefined 时,首先尝试匹配 number,然后尝试匹配 boolean,最后尝试匹配 any,匹配成功则使用 any 这个重载定义。

    7 泛型

    泛型其实并不高深,借助几个已知概念可以帮助理解。

    7.1 泛型函数

    上文提到,当函数的参数和返回的类型存在联系时,我们使用了函数重载进行类型描述。

    假如希望函数的参数和返回的值,它们之间的类型一致。如果使用函数重载,则需要:

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    这显得十分繁琐。而且,当传入的参数是数组或其他对象时,匹配的是函数重载的 object 部分,返回值的类型也是 object,丢失了原有的结构。

    我们期望即使传入复杂的结构对象,也保留它们的类型描述。像上述代码中,传入是 number[] 类型的参数,期望返回的也是 number[] 类型描述,而不是 object 类型描述。

    而使用泛型就能解决这个问题。以下借助变量的概念来对泛型进行解释。

    变量我们都清楚,当变量被赋值成某值或对象时,该变量就代表着某值或对象。

    而在类型系统中,通过引入类型变量,达到和变量相同的效果:当类型变量被赋值成某类型,则类型变量就代表该类型。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    上述代码中,在函数名后添加 <T>, 代表在类型系统中声明了类型变量 T。所以,在对参数 a 和返回值进行类型描述时,我们可以使用 T 这个类型变量。

    另外,上述代码使用字母 T 代表类型变量,并不是固定的,也可以使用字母 A、a 等合法的变量名。只不过约定俗成,T 代表着 Type(类型),这样其他人阅读代码也一目了然。

    既然是变量,我们怎么给这个类型变量传参呢?

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    可以清晰地看到,在调用函数时,使用尖括号传入具体的类型值。以 foo<number[]>([1, 2, 3) 为例,相当于应用 function<number[]>(a: number[]): number[] 类型校验。这样,在参数和返回值中都保留了明确的数据结构。

    上文我们提到类型推断,同样在泛型中也可以应用。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    上述代码中,省略了明确的类型传参,但 TS 会根据我们传入的参数的类型,自动确定 T 的类型。

    7.2 泛型接口

    我们知道,接口是具有函数签名的,形如:

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    接口中的函数签名也存在泛型的形式:

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    另外,还可以将泛型参数作为接口的参数:

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    7.3 泛型类

    泛型类和泛型接口类似,声明泛型参数后,在类中就可以使用。

    一文学会 TypeScript 的 82% 常用知识点(下)
     
     

    结语

    以上就是关于 TS 的关键知识点,熟悉上下两篇文章的内容,即可阅读和使用大部分的 TS 代码。

    TS 的学习要点不多,一个周末时间基本能搞明白。

    学习 TS 的资料主要是官网,特别是 TS handbook,本文大部分内容也是基于其整理的,希望能给大家带来一些帮助。

  • 相关阅读:
    Eclipse修改JSP文件的默认编码
    RPM常用命令总结
    软链接的妙用
    多线程练习
    Spring整合struts的配置文件存放问题
    使用struts框架后的404错误
    俄罗斯方块中的编程思想
    引用类型的强制类型转换
    数据库还原的问题
    常用sql语法初级
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/11961089.html
Copyright © 2011-2022 走看看