typeScript - 核心概念

发表于 | 分类于 | | 热度: ℃ |
字数统计: 2.8k | 阅读时长 ≈ 11

1.元组

  • 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

  • 可以只赋值其中一项

1
2
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
  • 当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项
1
2
let xcatliu: [string, number];
 xcatliu = ['Xcat Liu', 25]

越界的元素

  • 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
1
2
3
let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];
xcatliu.push('http://xcatliu.com/'); // string| number的联合类型

2.枚举 Enum

  • 枚举（Enum）类型用于取值被限定在一定范围内的场景

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

  • 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：
1
2
3
Days['Sun']  // 0

Days[0]  // Sun

手动赋值

  • 我们也可以给枚举项手动赋值：未手动赋值的枚举项会接着上一个枚举项递增。
1
2
3
4
5
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
  • 未手动赋值的枚举项与手动赋值的重复了，TypeScript 可以分别获取到重复的默认值和手动赋值的枚举值，枚举名会发生覆盖，使用的时候需要注意，最好不要出现这种覆盖的情况。（看下面例子细品）
1
2
3
4
5
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true 先找到Sun然后被Wed覆盖了
  • 手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = “S”};

  • 手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1 
1
2
3
4
5
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

常数项和计算所得项

  • 枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

enum Color {Red, Green, Blue = “blue”.length};

  • 如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错

enum Color {Red = “red”.length, Green, Blue};

常数枚举

  • 常数枚举是使用 const enum 定义的枚举类型,并且不能包含计算成员

const enum Color {Red, Green, Blue = “blue”.length}; // 定义const有计算项会报错

1
2
3
4
5
6
7
const enum Directions {
    Up,
    Down,
    Left,
    Right
}
 // let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

外部枚举

  • 外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：
1
2
3
4
5
6
7
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
  • 同时使用 declare 和 const 也是可以的：
1
2
3
4
5
6
7
declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

3.类 class

  • JavaScript 通过构造函数实现类的概念，通过原型链实现继承

  • 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

  • 对象（Object）：类的实例，通过 new 生成

  • 面向对象（OOP）的三大特性：封装、继承、多态

封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据

继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性

多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal ，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是Dog ，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行eat

  • 存取器（getter & setter）：用以改变属性的读取和赋值行为

  • 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

  • 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

  • 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES6中的class

  • 属性和方法

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数。

1
2
3
4
5
6
7
8
9
10
11
class Animal {
    constructor(name) {
        this.name = name; // ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，ES7 提案中可以直接在类里面定义：叫做实例属性
    }

    sayHi() {
        return `My name is ${this.name}`;
    }
}
let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
  • 类的继承

使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法

1
2
3
4
5
6
7
8
9
10
11
class Cat extends Animal {
    constructor(name) {
        super(name); // 调用父类的 constructor(name)
        console.log(this.name);
    }
    sayHi() {
        return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
    }
}
let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom
  • 使用 getter 和 setter 可以改变属性的赋值和读取行为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Animal {
    constructor(name) {
        this.name = name; // new实例化的时候进入构造函数
    }
    get name() { // 通过new出来的实例获取class已经存在的属性走get
        return 'Jack';
    }
    set name(value) {// 通过new出来的实例修改已经存在的属性
        console.log('setter: ' + value);
    }
}
let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack
  • 静态方法

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

1
2
3
4
5
6
7
class Animal {
    static isAnimal(a) {
        return a instanceof Animal;
    }
}
let test = new Animal()
// Animal.isAnimal(test) // true
  • 实例属性

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义，ES7 提案中可以直接在类里面定义：

1
2
3
4
5
6
7
8
class Animal {
    name = 'Jack';
    constructor() {
    // ...
    }
}
let a = new Animal();
console.log(a.name); // Jack
  • 静态属性

ES7 提案中，可以使用 static 定义一个静态属性：不需要实例直接可以使用的属性

1
2
3
4
5
6
7
class Animal {
    static num = 42;
    constructor() {
    // ...
    }
}
console.log(Animal.num); // 42
  • 修饰符 Access Modifiers

public - 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的

1
2
3
4
5
6
7
8
9
10
class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private - 修饰的属性或方法是私有的，不能在声明它的类的外部访问(使用 private 修饰的属性或方法，在子类中也是不允许访问的)

1
2
3
4
5
6
7
8
9
class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}
let a = new Animal('Jack');
console.log(a.name); // 报错
a.name = 'Tom'; // // 报错
1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    private name; // 私有属性再子类中也不能访问
    public constructor(name) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name); // 报错
    }
}

protected - 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    protected name; // 在子类中可以被访问
    public constructor(name) {
        this.name = name;
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}
  • 抽象类

abstract 用于定义抽象类和其中的抽象方法

抽象类是不允许被实例化的

1
2
3
4
5
6
7
8
abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}
let a = new Animal('Jack'); // 报错

抽象类中的抽象方法必须被子类实现

1
2
3
4
5
6
7
8
9
10
11
12
abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}
class Cat extends Animal {
    public sayHi() {
        console.log(`${this.name} is eating.`);
    }
}
  • 给类加上 TypeScript 的类型很简单，与接口类似：
1
2
3
4
5
6
7
8
9
10
11
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHi(): string {
        return `My name is ${this.name}`;
    }
}
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
  • 接口 interfaces

类实现接口

实现（implements）是面向对象中的一个重要概念,一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现

这个特性大大提高了面向对象的灵活性

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 定义报警器成一个接口
interface Alarm {
    alert();
}

class Door {}

class Car{}
// 防盗门继承门并且实现报警器的接口
class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}
// 消防车继承了车并且也实现了报警器的接口
class Ambulance extends Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}
  • 一个类可以实现多个接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
interface Alarm {
    alert();
}
interface Light {
    lightOn();
    lightOff();
}
// Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
  • 接口继承接口

接口与接口之间可以是继承关系

1
2
3
4
5
6
7
interface Alarm {
    alert();
}
interface LightAlarm extends Alarm {
    lightOn();
    lightOff();
}
  • 接口继承类
1
2
3
4
5
6
7
8
class Point {
    x: number;
    y: number;
}
interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

1
2
3
4
5
6
7
8
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']

用泛型指定按照输入返回

1
2
3
4
5
6
7
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。

接着在调用的时候，可以指定它具体的类型为 string - createArray(3, ‘x’); // [‘x’, ‘x’, ‘x’]

当然，也可以不手动指定，而让类型推论自动推算出来 - createArray(3, ‘x’); // [‘x’, ‘x’, ‘x’]

初到贵宝地，有钱的给个钱场,没钱的挤一挤给个钱场