typescript 学习教程 (2)
typescript 学习教程 (2)
省委书记沙瑞金 发表于1年前
typescript 学习教程 (2)
  • 发表于 1年前
  • 阅读 185
  • 收藏 0
  • 点赞 0
  • 评论 0
新睿云服务器60天免费使用,快来体验!>>>   
微软开发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的第二次学习内容。
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 23
博文 43
码字总数 47581
×
省委书记沙瑞金
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: