如何在TypeScript中定義類并進(jìn)行調(diào)用

1. 類

1.1 定義類

在TypeScript中，定義類使用關(guān)鍵字class，后面接類名；定義三個(gè)屬性name、age和qq，類的構(gòu)造函數(shù)；定義類方法queryInfo，返回結(jié)果為三個(gè)屬性的拼接字符串。實(shí)例化對(duì)象a，調(diào)用類A，并傳入三個(gè)參數(shù)，然后依次打印三個(gè)屬性，調(diào)用方法。

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 實(shí)例應(yīng)用

將編譯好的js文件引入到HTML5頁(yè)面中，然后在瀏覽器中預(yù)覽，查看控制臺(tái)打印結(jié)果。

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

1.4 實(shí)現(xiàn)效果

實(shí)現(xiàn)效果

2. 類繼承

2.1 實(shí)例源碼

類的繼承跟Java語(yǔ)言一樣，使用extends關(guān)鍵字

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 實(shí)例效果

實(shí)例效果

3. 多類繼承

3.1 實(shí)例源碼

多類繼承是指多個(gè)類繼承同一個(gè)類，如類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));

3.3 實(shí)例效果

實(shí)例效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容