# 进阶

# 类型别名

类型别名用来给一个类型起个新名字。

type User = { name: string; age: number };
const user: User ={ name: '张三'; age: 20}

# 元祖

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

定义一对值分别为 string 和 number 的元组：

let tom: [string, number] = ['Tom', 25];

访问一个已知索引的元素时，会得到正确的类型：

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型:

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

# 枚举

枚举使用 enum 关键字来定义：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

手动赋值

const enum Type {
    Pc = 1,
    Mobile = 2,
    Web = 3
}

# 类(class)

在之前,JavaScript都是通过原型链实现继承,而在 ES6 中，JS 有了 class

# 类的定义与继承

类的定义使用 class 定义,继承使用 extends 就行，下面一个简单事例

class Person {
  name = 'dell';
  getName() {
    return this.name;
  }
}

class Teacher extends Person {
  getTeacherName() {
    return 'Teacher';
  }
  getName() {
    return super.getName() + 'lee';
  }
}

const teacher = new Teacher();
console.log(teacher.getName());
console.log(teacher.getTeacherName());

如上,我们定义类一个Person类,让 Teacher 继承它,并且重写了 getName 方法,也就是多态

# 构造器

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

class Animal {
  name = 'Jack';

  constructor() {
    // ...
  }
}

let a = new Animal();
console.log(a.name); // Jack

如果属性通过 constructor,可以通过这种简写的方式来定义

class Animal {
  constructor(public name?: string) {
    this.name = name
  }
}

let a = new Animal('小猫');
console.log(a.name);

# 静态属性

可以使用 static 定义一个静态属性：

class Animal {
  static num = 42;
  static say() {
    console.log('我是小猫');

  }
}

console.log(Animal.num);
Animal.say()

静态属性可以继承吗？

class Dog extends Animal {

}

console.log(Dog.num);
Dog.say()

可以看到,类的静态属性是可以被继承的

我们用 class 的静态属性来实现一个单例

class Demo {
  private static instance: Demo;
  private constructor(public name: string) {}

  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo('dell lee');
    }
    return this.instance;
  }
}

const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
console.log(demo1.name);
console.log(demo2.name);

# 类中的访问类型

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

public 允许我在类的内外被调用，默认所有的属性和方法都是 public 的
private 允许在类内被使用
protected 允许在类内及继承的子类中使用

可以在定义属性或者方法的前面添加修饰符,如下:

class Person {
  public name: string;
  private sayHi() {
    console.log(`hi:${this.name}`);
  }
}

这样一来,sayHi 只能在 Person 内部使用,无论是 new 还是继承都无法调用该方法

# readonly

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中

class Animal {
  constructor(public readonly name?: string) {
    this.name = name
  }
}
const animal = new Animal('动物')
animal.name = "ss"
// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

# getter 和 setter

使用 getter 和 setter 可以改变属性的赋值和读取行为：

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

# 泛型

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

# 例子🌰

如下，我们定义一个方法,用来交换输入的元组。

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}
swap([6, 'six']) // [ 'six', 6 ]

# 泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

使用了 extends约束了泛型 T必须符合接口 Lengthwise的形状，也就是必须包含 length属性。

# 泛型接口

使用含有泛型的接口来定义函数的形状，很多文章这样接受的. 我的理解就是给接口增强了功能,有点强行牵扯的味道

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(3, 'x'); // ['x', 'x', 'x']

可以把泛型参数提前到接口名上：

interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc<any>; // 此时在使用泛型接口的时候，需要定义泛型的类型
...

# 泛型类

泛型类看上去与泛型接口差不多。泛型类使用（ <>）括起泛型类型，跟在类名后面。

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

# 默认类型

当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

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;
}

← 基础知识类与接口 →