TypeScript 入门笔记(二)
基础篇
TypeScript 入门笔记(一)
进阶篇
1. 类型别名
// 使用 type 给类型取一个新名字
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
类型别名常用于联合类型。
再次提示:在 TS 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。而在 ES6 中,=> 叫做箭头函数。
2. 字符串字面量类型
// 用 type 定义字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
// 用 type 定义类型别名
type EventType = Element | null;
function handleEvent(ele: EventType, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello'), 'scroll'); // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错,event 不能为 'dblclick'
类型别名与字符串字面量类型都是使用 type 进行定义。
3. 元组
数组合并了相同类型的对象,而元组合并了不同类型的对象。
元组起源于函数编程语言(如 F#),这些语言中会频繁使用元组。
例子
定义一对值分别为 string 和 number 的元组:
let pany: [string, number] = ['pany', 25];
注意:string 和 number 的顺序是固定的
当赋值或访问一个已知索引的元素时,会得到正确的类型:
let pany: [string, number] = ['pany', 25];
pany[0] = 'pany-ang';
pany[1] = 26;
pany[0].slice(1);
pany[1].toFixed(2);
当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项:
let tom: [string, number];
tom = ['pany'];
// type '[string]' but required in type '[string, number]'.
越界的元素
当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:
let pany: [string, number];
pany = ['pany', 25];
pany.push('male');
pany.push(true);
// Argument of type 'true' is not assignable to parameter of type 'string | number'.
4. 枚举
TS 的枚举类型的概念来源于 C#
枚举类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。
4.1 常数项
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[6] === "Sat"); // true
枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射
4.2 手动赋值
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true
注意: 1. 未手动赋值的枚举项会接着上一个枚举项递增(+1) 2. 上面的例子中,递增到 3 的时候与前面的 Sun 的取值重复了,但是 TS 并没有报错,导致 Days[3] 的值先是 "Sun",而后又被 "Wed" 覆盖了
手动赋值的项可以不是数字
// 当然,不是数字时,必须用断言来让 tsc 无视类型检查
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
4.3 计算所得项
enum Color {Red, Green, Blue = "blue".length};
这里的 "blue".length 是一个计算所得项。
注意:如果紧接在计算所得项后面的是未手动赋值的项,那么它就会因为无法获得初始值而报错。所有计算所得项要么是最后一项,要么后面的所有项都手动赋了值。
当满足以下条件时,枚举成员被当作是常数:
-
不具有初始化函数并且之前的枚举成员是常数。在这种情况下,当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法,那么它的初始值为 0。
-
枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集,它可以在编译阶段求值。当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:
-
数字字面量
-
引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的)如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用
-
带括号的常数枚举表达式
-
+, -, ~ 一元运算符应用于常数枚举表达式
-
+, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符,常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity,则会在编译阶段报错
所有其它情况的枚举成员被当作是需要计算得出的值。
4.4 常数枚举
使用 const enum 定义的枚举类型:
const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算所得项
。
上例的编译结果是:
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
4.5 外部枚举
使用 declare enum 定义的枚举类型:
declare enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
declare 定义的类型只会用于编译时的检查,编译结果中会被删除。
上例的编译结果是:
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
5. 类
5.1 访问修饰符
TS 可以使用三种访问修饰符,分别是 public、private 和 protected。
-
public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的。
-
private 修饰的属性或方法是私有的,不能在声明它的类的外部访问(包括子类)。
-
protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的。
public
class Animal {
public name: string;
public constructor(name: string) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom
private
class Animal {
private name: string;
public constructor(name: string) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';
// 错误:Property 'name' is private and only accessible within class 'Animal'
当构造函数修饰为 private 时,该类不允许被继承或者实例化:
class Animal {
public name: string;
private constructor(name: string) {
this.name = name;
}
}
class Cat extends Animal { // 发生错误
constructor(name: string) {
super(name);
}
}
let a = new Animal('Jack'); // 发生错误
// Cannot extend a class 'Animal'. Class constructor is marked as private.
// Constructor of class 'Animal' is private and only accessible within the class declaration.
protected
当构造函数修饰为 protected 时,该类只允许被继承,不能被实例化:
class Animal {
public name: string;
protected constructor(name: string) {
this.name = name;
}
}
class Cat extends Animal {
constructor(name: string) {
super(name);
}
}
let a = new Animal('Jack'); // 发生错误
// Constructor of class 'Animal' is protected and only accessible within the class declaration.
5.2 参数属性
修饰符和 readonly 还可以使用在构造函数参数中,等同于类中定义该属性同时给该属性赋值,使代码更简洁。
class Animal {
// public name: string;
public constructor(public name: string) {
// this.name = name;
}
}
5.3 readonly
readonly 是只读属性关键字,只允许出现在属性声明或索引签名或构造函数中。
class Animal {
readonly name: string;
public constructor(name: string) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
// 错误:Cannot assign to 'name' because it is a read-only property.
注意,如果 readonly 和其他访问修饰符同时存在的话,需要写在其后面。
class Animal {
// public readonly name;
public constructor(public readonly name: string) {
// this.name = name;
}
}
5.4 抽象类
abstract 用于定义抽象类和其中的抽象方法。
注意:抽象类是不允许被实例化的,并且抽象类中的抽象方法必须被子类实现。
abstract class Animal {
public name: string;
public constructor(name: string) {
this.name = name;
}
public abstract sayHi(): void;
}
class Cat extends Animal {
public sayHi() {
console.log(`Meow, My name is ${this.name}`);
}
}
let cat = new Cat('Tom');
cat.sayHi(); // "Meow, My name is Tom"
6. 类与接口
之前学习过,接口可以用于对「对象的形状」进行描述。
这一章主要介绍接口的另一个用途,对类的一部分行为进行抽象。
6.1 类实现接口
举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类,车,也有报警器的功能,就可以考虑把报警器提取出来,作为一个接口,防盗门和车都去实现它:
interface Alarm {
alert(): void;
}
class Door {
}
class SecurityDoor extends Door implements Alarm {
alert() {
console.log('SecurityDoor alert');
}
}
class Car implements Alarm {
alert() {
console.log('Car alert');
}
}
当然,一个类只能自继承另一个类,但可以实现多个接口。
6.2 接口继承接口
interface Alarm {
alert(): void;
}
interface LightableAlarm extends Alarm {
lightOn(): void;
lightOff(): void;
}
LightableAlarm 继承了 Alarm,除了拥有 alert 方法之外,还拥有两个新方法 lightOn 和 lightOff。
6.3 接口继承类型
常见的面向对象语言中,接口是不能继承类的,但是在 TS 中却是可以的:
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
为什么 TS 会支持接口继承类:因为当我们在声明 class Point 时,除了会创建一个名为 Point 的类之外,同时也创建了一个名为 Point 的类型(实例的类型)。
7. 泛型
泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
7.1 基础例子
实现一个函数 createArray,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值:
function createArray(length: number, value: any): Array<any> {
let result = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
上例中,我们使用了之前提到过的数组泛型来定义返回值的类型。
这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型:
Array 允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value 的类型。
这时候,泛型就派上用场了:
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray<string>(3, 'x'); // ['x', 'x', 'x']
我们在函数名后添加了 ,其中T用来指代任意输入的类型,在后面的输入 value: T 和输出 Array 中即可使用了。
7.2 多个类型参数
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
swap<number, string>([7, 'seven']); // ['seven', 7]
7.3 泛型约束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
上例中,我们使用了 extends 约束了泛型T必须符合接口 Lengthwise 的形状,也就是必须包含 length 属性。如果不这样做,那么泛型 T 不一定包含 length 属性,编译就会报错。
7.4 泛型接口
之前学习过,可以使用接口的方式来定义一个函数需要符合的形状,当然也可以使用含有泛型的接口来定义函数的形状:
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray<string>(3, 'x'); // ['x', 'x', 'x']
进一步,可以把泛型参数提前到接口名上:
interface CreateArrayFunc<T> {
(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
7.5 泛型类
class GenericNumber<T> {
zeroValue!: T;
add!: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x: number, y: number): number { return x + y; };
// 或者:
class GenericNumber<T> {
constructor(public zeroValue: T, public add: (x: T, y: T) => T){
this.zeroValue = zeroValue;
this.add = add;
}
}
let myGenericNumber = new GenericNumber<number>(0, (x: number, y: number): number => { return x + y;});
7.6 泛型参数的默认类型
当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,默认类型就会起作用:
function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
8. 声明合并
如果定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型。
8.1 函数合并
// 之前学习过,使用重载定义多个函数类型
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
8.2 接口合并、类合并
接口合并:
interface Alarm {
price: number;
alert(s: string): string;
}
interface Alarm {
price: number; // 虽然 price 重复了,但类型都是 `number`,所以不会报错
weight: number;
alert(s: string, n: number): string;
}
相当于:
interface Alarm {
price: number;
weight: number;
alert(s: string): string;
alert(s: string, n: number): string;
}
类的合并与接口的合并规则一致。
最后
不要吝啬各位手里的赞啊!
End.