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

注意：类型别名常用在联合类型。

2. 字符串字面量类型

字符串字面量也是使用 type 来定义的

type EventName = 'click'|'scroll'|'mousemove';
function handleEvent(ele:Element,event:EventName){
	//do something...
}

handleEvent(document.getElementById('hello'), 'scroll');//right
handleEvent(document.getElementById('world'), 'dbclick');
//error：Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.

3. 元组

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

//定义一对值分别为string和number类型
let s:[string,number] = ['Tom',213];

let arr:[string,number];//定义变量
arr = ['Tom'];//error:变量赋值，赋值不能给变量其中一个元素赋值，但可以给指定元素赋值eg:arr[0] = 'gg';
arr = ['Tom',11] //right
arr.push(true); //error：添加元素不能添加原定义类型以外的类型

4. 枚举

枚举类型用于取值被限定在一定范围内的场景，比如一周只能是七天.

4.1 枚举使用 enum  来定义：

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

//编译结果：
var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

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

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

4.2 手动赋值：

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["Wed"] === 3); // true

4.3 常数项和计算所得项

枚举项有两种类型：常数项和计算所得项。
前面的例子都是常数项，举个计算所得项的例子：

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

如果计算所得项的后面是未手动赋值的项，那么它会因为未获得初始值而报错。

enum Color{Blur = 'blur'.length,Red,Green};
//error:Enum member must have initializer枚举项必须初始化

当满足以下条件时，枚举成员被当作是常数：

• 不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加 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];

5. 类

5.1 类的概念

• 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法
  
• 对象（Object）：类的实例，通过 new 生成
  
• 面向对象（OOP）的三大特性：封装、继承、多态
  
• 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
  
• 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
  
• 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
  
• 存取器（getter & setter）：用以改变属性的读取和赋值行为
  
• 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
  
• 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
  

5.2 ES6中类的用法

5.2.1 属性和方法

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

通过new生成新实例的时候，会自动调用类。

class Animal{
	constructor(name){
  	this.name = name;
  }
  sayHi(){
  	return `${name} say Hi!`;
  }
}

let cat = new Animal('Cat');
cat.sayHi();

5.2.2 类的继承

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

class Cat extends Animal{
	constructor(name){
  	super(name); //调用父类的constructor（name）
  }
  sayHi(){
  	return `Wow`+super.sayHi();//调用父类
  }
}

let Tom = new Cat('Tom');
console.log(Tom.sayHi);

5.2.3 存取器

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

5.2.4 静态方法

使用static修饰符修饰的方法称为_静态方法，它们不需要实例化，直接通过类进行调用。_Math.abs

class Animal {
    static isAnimal(a) {
        return a instanceof Animal;
    }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

5.3 ES7中类的用法

5.3.1 实例属性

ES6中实例的属性只能通过this.XXX来定义，但是在ES7中可以直接在类里面定义：

class Animal{
	name='Tom';
  constructor(name){
  	this.name = name;
  }
}
let cat = new Animal('Jack');
console.log(cat.name);//Jack

class Animal{
	name='Tom';
  constructor(){}
}
let cat = new Animal();
console.log(cat.name);//Tom

 class Animal{
	  name:string;
    constructor(){};
    sayHi(){
        return `${this.name}...`
    }
}

let Tom = new Animal();
Tom.name = 'Tom';
console.log(Tom.sayHi());//Tom

5.3.2 静态属性

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

class Animal{
	static name='Tom';
  constructor(){ //构造函数
  	//...
  }
}
let cat = new Animal();
console.log(Animal.name);//Tom

5.4 TypeScript中类的用法

5.4.1 public、private（私有的）和protected（受保护的）

TypeScript使用三种访问修饰符，分别是public、private和protected：

• public修饰的所有属性和方法都是公有的，可以在任意地方被调用，默认所有的方法和属性都是public的。
• private修饰的属性和方法是私有的，不能在声明他的类之外使用，包括不能在子类中访问。
  • private修饰的属性，不能再类之外的地方存取。
  • private修饰的构造函数，该类不能被实例化或者继承。
• protected修饰的属性和方法是受保护的，它和private类似，区别是他在子类中也是允许被访问的。
  • protected修饰的属性，不能在类的外部进行存取，但是可以在子类中存取。
  • protected修饰的构造函数，该类只能被继承，不能实例化。

举个例子：

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
//public定义的属性可以在通过实例进行调用或修改。
-----------------------------------------------------
  
class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}

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

// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
//私有的属性不能在类的外面存取。
——— ————— ————— ————— ——
//编译后的代码：
var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    return Animal;
}());
var a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';
//需要注意的是，TypeScript 编译之后的代码中，并没有限制 private 属性在外部的可访问性。

------------------------------------------------------

class Animal {
    private name;
    public constructor(name) {
        this.name = name;
    }
}

class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}

// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
//使用 private 修饰的属性或方法，在子类中也是不允许访问的

------------------------------------------------------

class Animal {
    protected name;
    public constructor(name) {
        this.name = name;
    }
}

class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}
//protected修饰的属性，是允许在子类中访问的。

//当构造函数修饰为 private 时，该类不允许被继承或者实例化：
class Animal {
    public name;
    private constructor (name) {
        this.name = name;
  }
}
class Cat extends Animal {
    constructor (name) {
        super(name);
    }
}

let a = new Animal('Jack');

// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.
// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.

-------------------------------------------------------

//当构造函数修饰为 protected 时，该类只允许被继承：
  class Animal {
    public name;
    protected constructor (name) {
        this.name = name;
  }
}
class Cat extends Animal {
    constructor (name) {
        super(name);
    }
}

let a = new Animal('Jack');

// index.ts(13,9): TS2674: Constructor of class 'Anial' is protected and only accessible within the class declaration.

------------------------------------------------------

//修饰符还可以使用在构造函数参数中，等同于类中定义该属性，使代码更简洁。
class Animal {
    // public name: string;
    public constructor (public name) {
        this.name = name;
    }
}

5.4.2 readonly

只读属性关键字，只允许出现在属性声明和索引签名中：

class Animal {
    readonly name;
    public constructor(name) {
        this.name = name;
    }
}

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

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意：如果readonly和和其他访问修饰符同时存在的时候，需要写在后面：

class Animal {
    public constructor(private readonly name) {
        this.name = name;
    }
}

5.4.3 抽象类

abstract用于定义抽象类和其中的抽象方法。
首先抽象类是不允许被实例化的：因为抽象类是用来供子类使用的！

abstract class Animal{
	pubilc name;
  public constructor(name){
  	this.name = name;
  };
  public abstract sayHi();
}

let a = new Animal('j') //error
//Error:Cannot create an instance of an abstract class.

错误示例：

abstract class Animal{
	pubilc name;
  public constructor(name){
  	this.name = name;
  };
  public abstract sayHi(){
  	return `${this.name}`  //error
  }
}
//Error: Method 'sayHi' cannot have an implementation because it is marked abstract.
//方法'sayHi'不能有实现，因为它被标记为抽象

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

abstract class Animal{
	public name;
  public constructor(name){
  	this.name = name;
  }
  public abstract sayHi();
}
//Error
class Cat extends Animal{
	public eat(){
  	return `${this.name} is eatting...`
  }
}

//Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.  
//非抽象类“Cat”未实现继承自类“Animal”的抽象成员“sayHi”。

//Right
class Cat extends Animal{
	public sayHi(){
  	return `${this.name} is saying...`
  }
}

5.4.4 类的类型

class Animal{
	name:string;
  constructor(name:string){
  	this.name = name;
  }
  sayHi():string{
  	return `${this.name} is saying...`;
  }
}

注意问题:父类的属性需要在类中定义，如果子类继承父类的属性，则不需要在类中再次定义：

class Animal{
    name;
    protected constructor(name){
        this.name = name;
    };
     sayHi(){
        return `${this.name}...`
    }
}

class Cat extends Animal{
    age;//自身定义的属性
    constructor(name,age){
        super(name);//继承来自父类的属性
      	this.age = age;
    };
    sayHi(){
        return ``+super.sayHi()+this.age; //super.sayHi()继承来自父类的方法
    } 
}

let a = new Cat('Tom');
console.log(a.sayHi()) //Tom...1

6. 类与接口