typescript 学习教程 (2)

微软开发typescript是为了让我们写javascript更加的清晰的代码构造,相对于javascript中的js满天飞的时代,使用typescript的模块儿话更加的清晰,更加的明确。对于javascript,具有面向对象的特性,而typescript则更是面向对象的一种语言,虽说最后还是会编译成javascript。

我们学习语言先学习的是变量的定义,对于typescript的定义,我们的定义方法(var 变量名:变量类型=变量值),具体的定义如下,

var a:string = 'a';
var n:number = 123;
var b:boolean = false;

javascript的变量是弱变量,正是因为这个原因,才会导致javascript维护起来比较复杂。所以,微软在开发typescript的时候,已经替我们考虑到了这个问题,所以,在typescript中引入了五种基本的数据类型,也可以说这是5种数据的使用范围。当然数据类型也可以是自定义的类,或者是接口,或者是别的。

number:整数和符点数类型。
string:字符串类型。
boolean:布尔类型。
undefined:未定义类型。
null:空值类型。

接着就是关于面向对象的一下内容,就是类,首先我们使用typescript定义一个类,然后编译成js。如下所示:

class persion {
    name: string;
    age:number;

    getName():string{
        return this.name;
    }
    eat(): void{
        console.log(this.name+ 'eat!');
    }
    setName(n:string):void {
        this.name = n; 
    } 
}

编译后:

var persion = (function () {
    function persion() {
    }
    persion.prototype.getName = function () {
        return this.name;
    };
    persion.prototype.eat = function () {
        console.log(this.name + 'eat!');
    };
    persion.prototype.setName = function (n) {
        this.name = n;
    };
    return persion;
}());

对于面向对象,我们常说,面向具有三大属性,封装、继承、多态、,上面得写的列子则是关于typescript的基本的封装,然后呢,关于typescript继承。

class Animai {
    name: string
    eat(): void {
        alert(this.name + '吃');
    }
    sleep(): void {
        alert(this.name + '睡觉')
    }
    breath(): void {
        alert(this.name + '呼吸');
    }
    constructor(name: string) {
        this.name = name;
    }
}
class Fish extends Animai {
    constructor(name: string) {
        super(name);
    }
    breath(): void {
        alert(this.name + '吐泡');
    }
}

var fi:Fish;

编译之后的则生成如下代码。

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 Animai = (function () {
    function Animai(name) {
        this.name = name;
    }
    Animai.prototype.eat = function () {
        alert(this.name + '吃');
    };
    Animai.prototype.sleep = function () {
        alert(this.name + '睡觉');
    };
    Animai.prototype.breath = function () {
        alert(this.name + '呼吸');
    };
    return Animai;
}());
var Fish = (function (_super) {
    __extends(Fish, _super);
    function Fish(name) {
        _super.call(this, name);
    }
    Fish.prototype.breath = function () {
        alert(this.name + '吐泡');
    };
    return Fish;
}(Animai));
var fi;

在typescript中,我们继承,我们使用关键字extends来实现类的继承。typescript的派生类中,使用super来调用基类的构造函数。

当然面向对象不还有一个属性就是多态,对于多态的是实现就挺简单了。下面又是一个例子,这个例子中的两个类是上面方法中的类。来进行实现的。


function Breath(f: Fish) {
    f.breath();
}

var fish = new Fish('小雨');
Breath(fish);

整个编译过后就是成如下内容。

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 Animai = (function () {
    function Animai(name) {
        this.name = name;
    }
    Animai.prototype.eat = function () {
        console.log(this.name + '吃');
    };
    Animai.prototype.sleep = function () {
        console.log(this.name + '睡觉');
    };
    Animai.prototype.breath = function () {
        console.log(this.name + '呼吸');
    };
    return Animai;
}());
var Fish = (function (_super) {
    __extends(Fish, _super);
    function Fish(name) {
        _super.call(this, name);
    }
    Fish.prototype.breath = function () {
        console.log(this.name + '吐泡');
    };
    return Fish;
}(Animai));
function Breath(f) {
    f.breath();
}
var fish = new Fish('小雨');
Breath(fish);

上面就是一关于type的第二次学习内容。

转载于:https://my.oschina.net/shuinian/blog/751034

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值