投稿
  1. 极客之音首页
  2. 前端开发

TypeScript进阶篇

小半 • • 前端开发 • 阅读 203

进阶篇

快速了解

面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

  • 举例来说：
    • 操作浏览器要使用window对象
    • 操作网页要使用document对象
    • 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

  • 定义类：

    • class 类名 {
       属性名: 类型;
       
       constructor(参数: 类型){
        this.属性名 = 参数;
       }
       
       方法名(){
        ....
       }

      }

  • 示例：

    • class Person{
          name: string;
          age: number;

          constructor(name: string, age: number){
              this.name = name;
              this.age = age;
          }

          sayHello(){
              console.log(`大家好，我是${this.name}`);
          }
      }

  • 使用类：

    • const p = new Person('孙悟空', 18);
      p.sayHello();

面向对象的特点

  • 封装

    • 在类中，使用this表示当前对象

    • 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用

    • 静态属性（方法）使用static开头

    • 示例：

    • class Tools{
          static PI = 3.1415926;
          
          static sum(num1: number, num2: number){
              return num1 + num2
          }
      }

      console.log(Tools.PI);
      console.log(Tools.sum(123, 456));

    • 对于一些不希望被任意修改的属性，可以将其设置为private

    • 直接将其设置为private将导致无法再通过对象修改其中的属性

    • 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器

    • 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

    • 示例：

    • class Person{
          private _name: string;

          constructor(name: string){
              this._name = name;
          }

          get name(){
              return this._name;
          }

          set name(name: string){
              this._name = name;
          }

      }

      const p1 = new Person('孙悟空');
      console.log(p1.name); // 通过getter读取name属性
      p1.name = '猪八戒'; // 通过setter修改name属性

    • public

    • protected

    • private

    • class Person{
          public name: string; // 写或什么都不写都是public
          public age: number;

          constructor(name: string, age: number){
              this.name = name; // 可以在类中修改
              this.age = age;
          }

          sayHello(){
              console.log(`大家好，我是${this.name}`);
          }
      }

      class Employee extends Person{
          constructor(name: string, age: number){
              super(name, age);
              this.name = name; //子类中可以修改
          }
      }

      const p = new Person('孙悟空', 18);
      p.name = '猪八戒';// 可以通过对象修改
    • class Person{
          protected name: string;
          protected age: number;

          constructor(name: string, age: number){
              this.name = name; // 可以修改
              this.age = age;
          }

          sayHello(){
              console.log(`大家好，我是${this.name}`);
          }
      }

      class Employee extends Person{

          constructor(name: string, age: number){
              super(name, age);
              this.name = name; //子类中可以修改
          }
      }

      const p = new Person('孙悟空', 18);
      p.name = '猪八戒';// 不能修改
    • class Person{
          private name: string;
          private age: number;

          constructor(name: string, age: number){
              this.name = name; // 可以修改
              this.age = age;
          }

          sayHello(){
              console.log(`大家好，我是${this.name}`);
          }
      }

      class Employee extends Person{

          constructor(name: string, age: number){
              super(name, age);
              this.name = name; //子类中不能修改
          }
      }

      const p = new Person('孙悟空', 18);
      p.name = '猪八戒';// 不能修改
    • public（默认值），可以在类、子类和对象中修改
    • protected ，可以在类、子类中修改
    • private ，可以在类中修改
    • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

    • 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

    • 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

    • 只读属性（readonly）：

    • TS中属性具有三种修饰符：

    • 示例：

    • 属性存取器

    • 静态属性

    • this

    • 继承

      • 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例

      • abstract class Animal{
            abstract run(): void;
            bark(){
                console.log('动物在叫~');
            }
        }

        class Dog extends Animals{
            run(){
                console.log('狗在跑~');
            }
        }

      • 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现

      • 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写

      • 示例：

      • class Animal{
            name: string;
            age: number;

            constructor(name: string, age: number){
                this.name = name;
                this.age = age;
            }

            run(){
                console.log(`父类中的run方法！`);
            }
        }

        class Dog extends Animal{

            bark(){
                console.log(`${this.name}在汪汪叫！`);
            }

            run(){
                console.log(`子类中的run方法，会重写父类中的run方法！`);
            }
        }

        const dog = new Dog('旺财', 4);
        dog.bark();

      • 在子类中可以使用super来完成对父类的引用

      • 示例：

      • class Animal{
            name: string;
            age: number;

            constructor(name: string, age: number){
                this.name = name;
                this.age = age;
            }
        }

        class Dog extends Animal{

            bark(){
                console.log(`${this.name}在汪汪叫！`);
            }
        }

        const dog = new Dog('旺财', 4);
        dog.bark();

      • 继承时面向对象中的又一个特性

      • 通过继承可以将其他类中的属性和方法引入到当前类中

      • 通过继承可以在不修改类的情况下完成对类的扩展

      • 重写

      • 抽象类（abstract class）

    接口（Interface）

    接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

    • 示例（检查对象类型）：

      • interface Person{
            name: string;
            sayHello():void;
        }

        function fn(per: Person){
            per.sayHello();
        }

        fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});

    • 示例（实现）

      • interface Person{
            name: string;
            sayHello():void;
        }

        class Student implements Person{
            constructor(public name: string) {
            }

            sayHello() {
                console.log('大家好，我是'+this.name);
            }
        }

    泛型（Generic）

    定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

    • 举个例子：

      • interface MyInter{
            length: number;
        }

        function test<T extends MyInter>(arg: T): number{
            return arg.length;
        }

      • 使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用。

      • class MyClass<T>{
            prop: T;

            constructor(prop: T){
                this.prop = prop;
            }
        }
      • function test<T, K>(a: T, b: K): K{
            return b;
        }

        test<number, string>(10, "hello");

      • 使用泛型时，完全可以将泛型当成是一个普通的类去使用

      • 方式一（直接使用）：

      • 方式二（指定类型）：

      • test(10)

      • 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

      • test<number>(10)

      • 也可以在函数后手动指定泛型

      • function test(arg: any): any{
         return arg;
        }

      • 上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型

      • 使用泛型：

      • function test<T>(arg: T): T{
         return arg;
        }

      • 这里的<T>就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。

      • 那么如何使用上边的函数呢？

      • 可以同时指定多个泛型，泛型间使用逗号隔开：

      • 类中同样可以使用泛型：

      • 除此之外，也可以对泛型的范围进行约束

    示例

    类的简介.ts

    // 使用class关键字来定义一个类
    /*
    *   对象中主要包含了两个部分：
    *       属性
    *       方法
    * */
    class Person{

        /*
        *   直接定义的属性是实例属性，需要通过对象的实例去访问：
        *       const per = new Person();
        *       per.name
        *
        *   使用static开头的属性是静态属性（类属性），可以直接通过类去访问
        *       Person.age
        *
        *   readonly开头的属性表示一个只读的属性无法修改
        * */

        // 定义实例属性
        // readonly name: string = '孙悟空';
        name = '孙悟空';

        // 在属性前使用static关键字可以定义类属性（静态属性）
        // static readonly age: number = 18;
        age = 18;


        // 定义方法
        /*
        * 如果方法以static开头则方法就是类方法，可以直接通过类去调用
        * */
        sayHello(){
            console.log('Hello 大家好！');
        }

    }

    const per = new Person();

    // console.log(per);
    // console.log(per.name, per.age);

    // console.log(Person.age);

    // console.log(per.name);
    // per.name = 'tom';
    // console.log(per.name);

    // per.sayHello();

    // Person.sayHello();
    per.sayHello();

    构造函数.ts

    class Dog{
        name: string;
        age: number;

        // constructor 被称为构造函数
        //  构造函数会在对象创建时调用
        constructor(name: string, age: number) {
            // 在实例方法中，this就表示当前当前的实例
            // 在构造函数中当前对象就是当前新建的那个对象
            // 可以通过this向新建的对象中添加属性
            this.name = name;
            this.age = age;
        }

        bark(){
            // alert('汪汪汪！');
            // 在方法中可以通过this来表示当前调用方法的对象
            console.log(this.name);
        }
    }

    const dog = new Dog('小黑', 4);
    const dog2 = new Dog('小白', 2);

    // console.log(dog);
    // console.log(dog2);

    dog2.bark();

    继承.ts

    (function (){

        // 定义一个Animal类
        class Animal{
            name: string;
            age: number;

            constructor(name: string, age: number) {
                this.name = name;
                this.age = age;
            }

            sayHello(){
                console.log('动物在叫~');
            }
        }

        /*
        * Dog extends Animal
        *   - 此时，Animal被称为父类，Dog被称为子类
        *   - 使用继承后，子类将会拥有父类所有的方法和属性
        *   - 通过继承可以将多个类中共有的代码写在一个父类中，
        *       这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
        *       如果希望在子类中添加一些父类中没有的属性或方法直接加就行
        *   - 如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
        *       这种子类覆盖掉父类方法的形式，我们称为方法重写
        *
        * */
        // 定义一个表示狗的类
        // 使Dog类继承Animal类
        class Dog extends Animal{

            run(){
                console.log(`${this.name}在跑~~~`);
            }

            sayHello() {
                console.log('汪汪汪汪！');
            }

        }

        // 定义一个表示猫的类
        // 使Cat类继承Animal类
        class Cat extends Animal{
            sayHello() {
                console.log('喵喵喵喵！');
            }
        }

        const dog = new Dog('旺财', 5);
        const cat = new Cat('咪咪', 3);
        console.log(dog);
        dog.sayHello();
        dog.run();
        console.log(cat);
        cat.sayHello();


    })();

    super.ts

    (function () {
        class Animal {
            name: string;

            constructor(name: string) {
                this.name = name;
            }

            sayHello() {
                console.log('动物在叫~');
            }
        }

        class Dog extends Animal{

            age: number;

            constructor(name: string, age: number) {
                // 如果在子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用
                super(name); // 调用父类的构造函数
                this.age = age;
            }

            sayHello() {
                // 在类的方法中 super就表示当前类的父类
                //super.sayHello();

                console.log('汪汪汪汪！');
            }

        }

        const dog = new Dog('旺财', 3);
        dog.sayHello();
    })();

    抽象类.ts

    (function () {

        /*
        *   以abstract开头的类是抽象类，
        *       抽象类和其他类区别不大，只是不能用来创建对象
        *       抽象类就是专门用来被继承的类
        *
        *       抽象类中可以添加抽象方法
        * */
        abstract class Animal {
            name: string;

            constructor(name: string) {
                this.name = name;
            }

            // 定义一个抽象方法
            // 抽象方法使用 abstract开头，没有方法体
            // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
            abstract sayHello():void;
        }

        class Dog extends Animal{

            sayHello() {
                console.log('汪汪汪汪！');
            }

        }

        class Cat extends Animal{
            sayHello() {
                console.log('喵喵喵喵！');
            }

        }

        const dog = new Dog('旺财');
        dog.sayHello();

    })();

    接口.ts

    (function () {

        // 描述一个对象的类型
        type myType = {
            name: string,
            age: number
        };

        /*
        *   接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
        *       同时接口也可以当成类型声明去使用
        * */
        interface myInterface {
            name: string;
            age: number;
        }

        interface myInterface {
            gender: string;
        }

        // const obj: myInterface = {
        //     name: 'sss',
        //     age: 111,
        //     gender: '男'
        // };

        /*
        * 接口可以在定义类的时候去限制类的结构，
        *   接口中的所有的属性都不能有实际的值
        *   接口只定义对象的结构，而不考虑实际值
        *       在接口中所有的方法都是抽象方法
        *
        * */
        interface myInter{
            name: string;

            sayHello():void;
        }

        /*
        * 定义类时，可以使类去实现一个接口,
        *   实现接口就是使类满足接口的要求
        * */
        class MyClass implements myInter{
            name: string;

            constructor(name: string) {
                this.name = name;
            }

            sayHello(){
                console.log('大家好~~');
            }

        }

    })();

    属性的封装.ts

    (function (){
        // 定义一个表示人的类
        class Person{
            // TS可以在属性前添加属性的修饰符
            /*
            *   public 修饰的属性可以在任意位置访问（修改） 默认值
            *   private 私有属性，私有属性只能在类内部进行访问（修改）
            *       - 通过在类中添加方法使得私有属性可以被外部访问
            *   protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
            *
            * */
            private _name: string;
            private _age: number;

            constructor(name: string, age: number) {
                this._name = name;
                this._age = age;
            }

            /*
            *   getter方法用来读取属性
            *   setter方法用来设置属性
            *       - 它们被称为属性的存取器
            * */

            // 定义方法，用来获取name属性
            // getName(){
            //     return this._name;
            // }
            //
            // // 定义方法，用来设置name属性
            // setName(value: string){
            //     this._name = value;
            // }
            //
            // getAge(){
            //     return this._age;
            // }
            //
            // setAge(value: number){
            //     // 判断年龄是否合法
            //     if(value >= 0){
            //         this._age = value;
            //     }
            // }

            // TS中设置getter方法的方式
            get name(){
                // console.log('get name()执行了！！');
                return this._name;
            }

            set name(value){
                this._name = value;
            }

            get age(){
                return this._age;
            }

            set age(value){
                if(value >= 0){
                    this._age = value
                }
            }
        }

        const per = new Person('孙悟空', 18);

        /*
        * 现在属性是在对象中设置的，属性可以任意的被修改,
        *   属性可以任意被修改将会导致对象中的数据变得非常不安全
        * */

        // per.setName('猪八戒');
        // per.setAge(-33);

        per.name = '猪八戒';
        per.age = -33;

        // console.log(per);


        class A{
            protected num: number;

            constructor(num: number) {
                this.num = num;
            }
        }

        class B extends A{

            test(){
                console.log(this.num);
            }

        }

        const b = new B(123);
        // b.num = 33;


       /* class C{

            name: string;
            age: number

            // 可以直接将属性定义在构造函数中
            constructor(name: string, age: number) {
                this.name = name;
                 this.age = age;
            }

        }*/

        class C{

            // 可以直接将属性定义在构造函数中
            constructor(public name: string, public age: number) {
            }

        }

        const c = new C('xxx', 111);

        console.log(c);

    })();

    泛型.ts

    /*
    function fn(a: any): any{
        return a;
    }*/

    /*
    *   在定义函数或是类时，如果遇到类型不明确就可以使用泛型
    *
    * */

    function fn<T>(a: T): T{
        return a;
    }

    // 可以直接调用具有泛型的函数
    let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
    let result2 = fn<string>('hello'); // 指定泛型

    // 泛型可以同时指定多个
    function fn2<T, K>(a: T, b: K):T{
        console.log(b);
        return a;
    }
    fn2<number, string>(123, 'hello');

    interface Inter{
        length: number;
    }

    // T extends Inter 表示泛型T必须时Inter实现类（子类）
    function fn3<T extends Inter>(a: T): number{
        return a.length;
    }

    class MyClass<T>{
        name: T;
        constructor(name: T) {
            this.name = name;
        }
    }

    const mc = new MyClass<string>('孙悟空');

    贪吃蛇案例

    点我去下载

    类型别名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();
        }
    }

    上例中，我们使用 type 创建类型别名。

    类型别名常用于联合类型。

    字符串字面量类型type

    字符串字面量类型用来约束取值只能是某几个字符串中的一个。

    简单的例子

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

    handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
    handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

    // index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

    上例中，我们使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种。

    注意，类型别名与字符串字面量类型都是使用 type 进行定义。

    元组

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

    元组起源于函数编程语言（如 F#），这些语言中会频繁使用元组。

    简单的例子

    定义一对值分别为 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[0] = 'Tom';

    但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。

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

    // Property '1' is missing in type '[string]' but required in type '[string, number]'.

    越界的元素

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

    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

    枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

    简单的例子

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

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

    枚举成员会被赋值为从 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

    事实上，上面的例子会被编译为：

    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 = {}));

    手动赋值

    我们也可以给枚举项手动赋值：

    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 是不会察觉到这一点的：

    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

    上面的例子中，递增到 3 的时候与前面的 Sun 的取值重复了，但是 TypeScript 并没有报错，导致 Days[3] 的值先是 "Sun"，而后又被 "Wed" 覆盖了。编译的结果是：

    var Days;
    (function (Days) {
        Days[Days["Sun"] = 3] = "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 = {}));

    所以使用的时候需要注意，最好不要出现这种覆盖的情况。

    手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：

    enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
    var Days;
    (function (Days) {
        Days[Days["Sun"] = 7] = "Sun";
        Days[Days["Mon"] = 8] = "Mon";
        Days[Days["Tue"] = 9] = "Tue";
        Days[Days["Wed"] = 10] = "Wed";
        Days[Days["Thu"] = 11] = "Thu";
        Days[Days["Fri"] = 12] = "Fri";
        Days[Days["Sat"] = "S"] = "Sat";
    })(Days || (Days = {}));

    当然，手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 1：

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

    上面的例子中，"blue".length 就是一个计算所得项。

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

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

    // index.ts(1,33): error TS1061: Enum member must have initializer.
    // index.ts(1,40): error TS1061: Enum member must have initializer.

    下面是常数项和计算所得项的完整定义，部分引用自中文手册 – 枚举：

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

    • 不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法，那么它的初始值为 0。
    • 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：
      • 数字字面量
      • 引用之前定义的常数枚举成员（可以是在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，可以使用非限定名来引用
      • 带括号的常数枚举表达式
      • +, -, ~ 一元运算符应用于常数枚举表达式
      • +, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符，常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错

    所有其它情况的枚举成员被当作是需要计算得出的值。

    常数枚举

    常数枚举是使用 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 */];

    假如包含了计算成员，则会在编译阶段报错：

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

    // index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

    外部枚举§

    外部枚举（Ambient Enums）是使用 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];

    外部枚举与声明语句一样，常出现在声明文件中。

    同时使用 declare 和 const 也是可以的：

    declare 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 */];

    TypeScript 的枚举类型的概念来源于 C#。

    类

    传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。

    TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。

    这一节主要介绍类的用法，下一节再介绍如何定义类的类型。

    类的概念

    虽然 JavaScript 中有类的概念，但是可能大多数 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 中类的用法

    下面我们先回顾一下 ES6 中类的用法，更详细的介绍可以参考 ECMAScript 6 入门 – Class。

    属性和方法

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

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

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

    let a = new Animal('Jack');
    console.log(a.sayHi()); // My name is Jack

    类的继承

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

    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 可以改变属性的赋值和读取行为：

    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

    静态方法

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

    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

    ES7 中类的用法

    ES7 中有一些关于类的提案，TypeScript 也实现了它们，这里做一个简单的介绍。

    实例属性

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

    class Animal {
      name = 'Jack';

      constructor() {
        // ...
      }
    }

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

    静态属性

    ES7 提案中，可以使用 static 定义一个静态属性：

    class Animal {
      static num = 42;

      constructor() {
        // ...
      }
    }

    console.log(Animal.num); // 42

    TypeScript 中类的用法

    public private 和 protected

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

    • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
    • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
    • protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

    下面举一些例子：

    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

    上面的例子中，name 被设置为了 public，所以直接访问实例的 name 属性是允许的。

    很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了：

    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'.

    需要注意的是，TypeScript 编译之后的代码中，并没有限制 private 属性在外部的可访问性。

    上面的例子编译后的代码是：

    var Animal = (function () {
      function Animal(name) {
        this.name = name;
      }
      return Animal;
    })();
    var a = new Animal('Jack');
    console.log(a.name);
    a.name = 'Tom';

    使用 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'.

    而如果是用 protected 修饰，则允许在子类中访问：

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

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

    当构造函数修饰为 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 'Animal' is protected and only accessible within the class declaration.

    参数属性

    修饰符和readonly还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。

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

    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 readonly name;
      public constructor(public readonly name) {
        // this.name = name;
      }
    }

    抽象类

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

    什么是抽象类？

    首先，抽象类是不允许被实例化的：

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

    let a = new Animal('Jack');

    // index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

    上面的例子中，我们定义了一个抽象类 Animal，并且定义了一个抽象方法 sayHi。在实例化抽象类的时候报错了。

    其次，抽象类中的抽象方法必须被子类实现：

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

    class Cat extends Animal {
      public eat() {
        console.log(`${this.name} is eating.`);
      }
    }

    let cat = new Cat('Tom');

    // index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.

    上面的例子中，我们定义了一个类 Cat 继承了抽象类 Animal，但是没有实现抽象方法 sayHi，所以编译报错了。

    下面是一个正确使用抽象类的例子：

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

    class Cat extends Animal {
      public sayHi() {
        console.log(`Meow, My name is ${this.name}`);
      }
    }

    let cat = new Cat('Tom');

    上面的例子中，我们实现了抽象方法 sayHi，编译通过了。

    需要注意的是，即使是抽象方法，TypeScript 的编译结果中，仍然会存在这个类，上面的代码的编译结果是：

    var __extends =
      (this && this.__extends) ||
      function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() {
          this.constructor = d;
        }
        d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
      };
    var Animal = (function () {
      function Animal(name) {
        this.name = name;
      }
      return Animal;
    })();
    var Cat = (function (_super) {
      __extends(Cat, _super);
      function Cat() {
        _super.apply(this, arguments);
      }
      Cat.prototype.sayHi = function () {
        console.log('Meow, My name is ' + this.name);
      };
      return Cat;
    })(Animal);
    var cat = new Cat('Tom');

    类的类型

    给类加上 TypeScript 的类型很简单，与接口类似：

    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）可以用于对「对象的形状（Shape）」进行描述。

    这一章主要介绍接口的另一个用途，对类的一部分行为进行抽象。

    类实现接口

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

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

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

    一个类可以实现多个接口：

    interface Alarm {
        alert(): void;
    }

    interface Light {
        lightOn(): void;
        lightOff(): void;
    }

    class Car implements Alarm, Light {
        alert() {
            console.log('Car alert');
        }
        lightOn() {
            console.log('Car light on');
        }
        lightOff() {
            console.log('Car light off');
        }
    }

    上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

    接口继承接口

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

    interface Alarm {
        alert(): void;
    }

    interface LightableAlarm extends Alarm {
        lightOn(): void;
        lightOff(): void;
    }

    这很好理解，LightableAlarm 继承了 Alarm，除了拥有 alert 方法之外，还拥有两个新方法 lightOn 和 lightOff。

    接口继承类

    常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：

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

    为什么 TypeScript 会支持接口继承类呢？

    实际上，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）。

    所以我们既可以将 Point 当做一个类来用（使用 new Point 创建它的实例）：

    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }

    const p = new Point(1, 2);

    也可以将 Point 当做一个类型来用（使用 : Point 表示参数的类型）：

    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }

    function printPoint(p: Point) {
        console.log(p.x, p.y);
    }

    printPoint(new Point(1, 2));

    这个例子实际上可以等价于：

    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }

    interface PointInstanceType {
        x: number;
        y: number;
    }

    function printPoint(p: PointInstanceType) {
        console.log(p.x, p.y);
    }

    printPoint(new Point(1, 2));

    上例中我们新声明的 PointInstanceType 类型，与声明 class Point 时创建的 Point 类型是等价的。

    所以回到 Point3d 的例子中，我们就能很容易的理解为什么 TypeScript 会支持接口继承类了：

    class Point {
        x: number;
        y: number;
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
    }

    interface PointInstanceType {
        x: number;
        y: number;
    }

    // 等价于 interface Point3d extends PointInstanceType
    interface Point3d extends Point {
        z: number;
    }

    let point3d: Point3d = {x: 1, y: 2, z: 3};

    当我们声明 interface Point3d extends Point 时，Point3d 继承的实际上是类 Point 的实例的类型。

    换句话说，可以理解为定义了一个接口 Point3d 继承另一个接口 PointInstanceType。

    所以「接口继承类」和「接口继承接口」没有什么本质的区别。

    值得注意的是，PointInstanceType 相比于 Point，缺少了 constructor 方法，这是因为声明 Point 类时创建的 Point 类型是不包含构造函数的。另外，除了构造函数是不包含的，静态属性或静态方法也是不包含的（实例的类型当然不应该包括构造函数、静态属性或静态方法）。

    换句话说，声明 Point 类时创建的 Point 类型只包含其中的实例属性和实例方法：

    class Point {
        /** 静态属性，坐标系原点 */
        static origin = new Point(0, 0);
        /** 静态方法，计算与原点距离 */
        static distanceToOrigin(p: Point) {
            return Math.sqrt(p.x * p.x + p.y * p.y);
        }
        /** 实例属性，x 轴的值 */
        x: number;
        /** 实例属性，y 轴的值 */
        y: number;
        /** 构造函数 */
        constructor(x: number, y: number) {
            this.x = x;
            this.y = y;
        }
        /** 实例方法，打印此点 */
        printPoint() {
            console.log(this.x, this.y);
        }
    }

    interface PointInstanceType {
        x: number;
        y: number;
        printPoint(): void;
    }

    let p1: Point;
    let p2: PointInstanceType;

    上例中最后的类型 Point 和类型 PointInstanceType 是等价的。

    同样的，在接口继承类的时候，也只会继承它的实例属性和实例方法。

    泛型

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

    简单的例子

    首先，我们来实现一个函数 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<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 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>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。

    接着在调用的时候，可以指定它具体的类型为 string。当然，也可以不手动指定，而让类型推论自动推算出来：

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

    多个类型参数

    定义泛型的时候，可以一次定义多个类型参数：

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

    swap([7, 'seven']); // ['seven', 7]

    上例中，我们定义了一个 swap 函数，用来交换输入的元组。

    泛型约束

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

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

    // index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.

    上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。

    这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：

    interface Lengthwise {
        length: number;
    }

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

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

    此时如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段就会报错了：

    interface Lengthwise {
        length: number;
    }

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

    loggingIdentity(7);

    // index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

    多个类型参数之间也可以互相约束：

    function copyFields<T extends U, U>(target: T, source: U): T {
        for (let id in source) {
            target[id] = (<T>source)[id];
        }
        return target;
    }

    let x = { a: 1, b: 2, c: 3, d: 4 };

    copyFields(x, { b: 10, d: 20 });

    上例中，我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。

    泛型接口

    可以使用接口的方式来定义一个函数需要符合的形状：

    interface SearchFunc {
      (source: string, subString: string): boolean;
    }

    let mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
        return source.search(subString) !== -1;
    }

    当然也可以使用含有泛型的接口来定义函数的形状：

    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>;
    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']

    注意，此时在使用泛型接口的时候，需要定义泛型的类型。

    泛型类

    与泛型接口类似，泛型也可以用于类的类型定义中：

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

    泛型参数的默认类型

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

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

    声明合并

    如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：

    函数的合并

    我们可以使用重载定义多个函数类型：

    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('');
        }
         return 0//这里必须加上一个return 数字或者字符串,否则报错没有返回值
    }

    接口的合并

    接口中的属性在合并时会简单的合并到一个接口中：

    interface Alarm {
        price: number;
    }
    interface Alarm {
        weight: number;
    }

    相当于：

    interface Alarm {
        price: number;
        weight: number;
    }

    注意，合并的属性的类型必须是唯一的：

    interface Alarm {
        price: number;
    }
    interface Alarm {
        price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
        weight: number;
    }
    interface Alarm {
        price: number;
    }
    interface Alarm {
        price: string;  // 类型不一致，会报错
        weight: number;
    }

    // index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.  Variable 'price' must be of type 'number', but here has type 'string'.

    接口中方法的合并，与函数的合并一样：

    interface Alarm {
        price: number;
        alert(s: string): string;
    }
    interface Alarm {
        weight: number;
        alert(s: string, n: number): string;
    }

    相当于：

    interface Alarm {
        price: number;
        weight: number;
        alert(s: string): string;
        alert(s: string, n: number): string;
    }

    类的合并

    类的合并与接口的合并规则一致。


    原文始发于微信公众号（程序员阿晶）：TypeScript进阶篇

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

    文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/19914.html

    赞 (1)
    小半的头像小半
    0 0

    相关推荐

    发表回复

    登录后才能评论
    极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！