写文章

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.

回复

我来回复

  • 暂无回复内容