1. 类

1.1 定义类

在TypeScript中，定义类使用关键字class，后面接类名；定义三个属性name、age和qq，类的构造函数；定义类方法queryInfo，返回结果为三个属性的拼接字符串。实例化对象a，调用类A，并传入三个参数，然后依次打印三个属性，调用方法。

class A {
    name: string;
    age: number;
    qq: string;
    constructor(name:string, age: number, qq: string) {
        this.name = name;
        this.age = age;
        this.qq = qq;
    }
    
    queryInfo() {
        return `姓名：${this.name},年龄：${this.age},QQ：${this.qq}`;
    }
}

let a = new A("张华",30,"4545455498652");
console.log(a.name,a.age,a.qq,a.queryInfo());

1.2 编译成JS

使用TypeScript命令可以将ts文件编译成js文件（新生成的）

var A = /** @class */ (function () {
    function A(name, age, qq) {
        this.name = name;
        this.age = age;
        this.qq = qq;
    }
    A.prototype.queryInfo = function () {
        return "\u59D3\u540D\uFF1A" + this.name + ",\u5E74\u9F84\uFF1A" + this.age + ",QQ\uFF1A" + this.qq;
    };
    return A;
}());
var a = new A("张华", 30, "4545455498652");
console.log(a.name, a.age, a.qq, a.queryInfo());

1.3 实例应用

将编译好的js文件引入到HTML5页面中，然后在浏览器中预览，查看控制台打印结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TypeScript类</title>
        <script src="cts/a.js"></script>
    </head>
    <body>
        
    </body>
</html>

1.4 实现效果

实现效果

2. 类继承

2.1 实例源码

类的继承跟Java语言一样，使用extends关键字

class Animal {
    name: string;
    constructor(name:string) {
        this.name = name;
    }
    
    eat(m:number) {
        console.log(`${this.name}吃了${m}`)
    }
}

class A extends Animal {
    constructor(name:string) {
        super(name);
    }
    
    eat(m=10) {
        super.eat(m)
    }
}

let a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));

2.2 编译JS代码

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.eat = function (m) {
        console.log(this.name + "\u5403\u4E86" + m);
    };
    return Animal;
}());
var A = /** @class */ (function (_super) {
    __extends(A, _super);
    function A(name) {
        return _super.call(this, name) || this;
    }
    A.prototype.eat = function (m) {
        if (m === void 0) { m = 10; }
        _super.prototype.eat.call(this, m);
    };
    return A;
}(Animal));
var a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));

2.3 实例效果

实例效果

3. 多类继承

3.1 实例源码

多类继承是指多个类继承同一个类，如类A、类B都继承类Animal

class Animal {
    name: string;
    constructor(name:string) {
        this.name = name;
    }
    
    eat(m:number) {
        console.log(`${this.name}吃了${m}`)
    }
}

class A extends Animal {
    constructor(name:string) {
        super(name);
    }
    
    eat(m=10) {
        super.eat(m)
    }
}

class B extends Animal {
    constructor(name:string) {
        super(name);
    }
    
    eat(m=100) {
        super.eat(m);
    }
    
    run(r:number) {
        console.log(`${this.name}跑的很快,${r}`);
    }
}

let a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));

let b = new B('老虎');
console.log(b.name);
console.log(b.eat(20000));
console.log(b.run(20));

3.2 编译JS代码

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.eat = function (m) {
        console.log(this.name + "\u5403\u4E86" + m);
    };
    return Animal;
}());
var A = /** @class */ (function (_super) {
    __extends(A, _super);
    function A(name) {
        return _super.call(this, name) || this;
    }
    A.prototype.eat = function (m) {
        if (m === void 0) { m = 10; }
        _super.prototype.eat.call(this, m);
    };
    return A;
}(Animal));
var B = /** @class */ (function (_super) {
    __extends(B, _super);
    function B(name) {
        return _super.call(this, name) || this;
    }
    B.prototype.eat = function (m) {
        if (m === void 0) { m = 100; }
        _super.prototype.eat.call(this, m);
    };
    B.prototype.run = function (r) {
        console.log(this.name + "\u8DD1\u7684\u5F88\u5FEB," + r);
    };
    return B;
}(Animal));
var a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));
var b = new B('老虎');
console.log(b.name);
console.log(b.eat(20000));
console.log(b.run(20));