TypeScript 入门笔记(二)

我心飞翔 分类:javascript

基础篇

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.

回复

我来回复
  • 暂无回复内容