【第4篇】TypeScript类的详解

1、最简单class使用.

  • Ts 文件代码
 /// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--这个是简单的class
class Employee {
    fullName: string;
}
var employee = new Employee();
employee.fullName = "Long long";//赋值
 
//说明这个属性是存在的..
if (employee.fullName) {
    alert(employee.fullName);
}
  • Ts 文件编译成js文件代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--这个是简单的class
var Employee = (function () {
   function Employee() {
   }
   return Employee;
})();
var employee = new Employee();
employee.fullName = "Long long"; //赋值
//说明这个属性是存在的..
if (employee.fullName) {
   alert(employee.fullName);
}

2、在class使用constructor关键字

  • Ts文件代码
 /// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--class和constructor构造器使用。
 class UserInfo{ 
    username:string;
    //--默认的构造方法..
    constructor(msg : string){ 
        this.username=msg;//从构造方法传一个用户字符串过去.
    }
    getUserInfo(){ 
         return "欢迎您, " + this.username; 
    }
 }  
function printMsg():string{ 
    var resMsg:string="";
    var g=new UserInfo("龙梅子");//创建一个UserInfo对象,并且构造函数必须要传一个字符串.
    resMsg=g.getUserInfo();//调用对象方法.
    return resMsg;
}
/****************jQuery-执行..**********************/
$(function(){ 
    var result=printMsg();
    $("#msg").html("<span style='color:green;'>"+result+"<span>"); 
    
});
  • Ts 文件编译成js文件代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--class和constructor构造器使用var UserInfo= (function () {
    //--默认的构造方法..
    function UserInfo(msg) {
        this.username=msg;//从构造方法传一个用户字符串过去.
    }
    UserInfo.prototype.getUserInfo = function () {
        return "欢迎您, " + this.username;
    };
    return UserInfo;
})();
function printMsg() {
    var resMsg = "";
    var g = new UserInfo("龙梅子"); //创建一个UserInfo对象,并且构造函数必须要传一个字符串.
    resMsg = g.getUserInfo(); //调用对象方法.
    return resMsg;
}
/****************jQuery-执行..**********************/
$(function () {
    var result = printMsg();
    $("#msg").html("<span style='color:green;'>" + result + "<span>");
});
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../test2.js"></script>
</head>
<body>
    <div id="msg"></div>
</body>
</html>

3在class使用super关键字

  • Ts文件代码
 /// <reference path="../plugins/typescript/typings/jquery.d.ts" />
 
//------class与supper使用.----------------
class Person{ 
    userName:string;//声明一个名称
    //构造方法
    constructor(paramVal:string){ 
        this.userName=paramVal;
    }
    
    //--声明一个getPersonInfo方法，并在声明age变量
    getPersonInfo(age:number=120):string{
        return  this.userName+"\n"+age;
    }
}
class Student1 extends Person{ 
    constructor(username:string){ 
        super(username);
    }
    getPersonInfo(age=100){ 
        var superMsg=super.getPersonInfo(age);
        return this.userName+"\n"+age+"岁"+"\n\t\t"+"默认信息：" +superMsg;
    }
}
class Student2 extends Person{ 
    
    constructor(username:string){ 
        super(username);
    }
    getPersonInfo(age=120){ 
        var superMsg=super.getPersonInfo(age);
        return this.userName+"\n"+age+"岁"+"\n\t\t"+"默认信息：" +superMsg;
    }
}
 
var stu1=new Student1("周伯通");
var stu2=new Student2("老毒物");
 
var stuMsg1=stu1.getPersonInfo();
var stuMsg2=stu2.getPersonInfo(80);//传一个默认值给getPersonInfo方法
 
$(function(){ 
 
    $("#msg1").html("<span style='color:red;'>"+stuMsg1+"<span>"); 
    $("#msg2").html("<span style='color:blue;'>"+stuMsg2+"<span>"); 
});
  • Ts编译成Js文件代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
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; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
//------class与supper使用.----------------
var Person = (function () {
    //构造方法
    function Person(paramVal) {
        this.userName = paramVal;
    }
    //--声明一个getPersonInfo方法，并在声明age变量
    Person.prototype.getPersonInfo = function (age) {
        if (age === void 0) { age = 120; }
        return this.userName + "\n" + age;
    };
    return Person;
})();
var Student1 = (function (_super) {
    __extends(Student1, _super);
    function Student1(username) {
        _super.call(this, username);
    }
    Student1.prototype.getPersonInfo = function (age) {
        if (age === void 0) { age = 100; }
        var superMsg = _super.prototype.getPersonInfo.call(this, age);
        return this.userName + "\n" + age + "岁" + "\n\t\t" + "默认信息：" + superMsg;
    };
    return Student1;
})(Person);
var Student2 = (function (_super) {
    __extends(Student2, _super);
    function Student2(username) {
        _super.call(this, username);
    }
    Student2.prototype.getPersonInfo = function (age) {
        if (age === void 0) { age = 120; }
        var superMsg = _super.prototype.getPersonInfo.call(this, age);
        return this.userName + "\n" + age + "岁" + "\n\t\t" + "默认信息：" + superMsg;
    };
    return Student2;
})(Person);
var stu1 = new Student1("周伯通");
var stu2 = new Student2("老毒物");
var stuMsg1 = stu1.getPersonInfo();
var stuMsg2 = stu2.getPersonInfo(80); //传一个默认值给getPersonInfo方法
$(function () {
    $("#msg1").html("<span style='color:red;'>" + stuMsg1 + "<span>");
    $("#msg2").html("<span style='color:blue;'>" + stuMsg2 + "<span>");
});
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../test4.js"></script>
</head>
<body>
    <div id="msg1"></div>
    <br/>
    <div id="msg2"></div>
</body>
</html>

4 在class使用public/private关键字

  • Ts 文件代码
/**
 * public/private
 * 默认是public
 * 您可能已经注意到，在我们还没有使用这个词“公众”作出任何类可见的成员的上述例子。
 * 如C＃语言要求每个成员被明确标记为'公共'可见。在打字稿，每个成员都是公共默认。
 * 您可能仍然标记成员的私人，所以你控制什么是公开可见的外部类的
 */
class MyAnimal {
    private name:string;
    //构造方法
    constructor(private  theName : string){ 
        this.name = theName;
    }
    getMsg(name : string):string{
        return this.name=name;
    }
    
}
//犀牛
class Rhino extends MyAnimal{ 
    constructor(){ 
        super("犀牛");
    }
    getMsg(name : string):string{
        return name;
    }
} 
//员工
class Employees {
    private name:string;
     //构造方法
    constructor(theName : string) { 
        this.name = theName;
    }   
}
 
var animal = new MyAnimal("山羊");//Goat山羊
var retMsg1=animal.getMsg("鹿");
 
var rhino = new  Rhino();
 
var employees = new Employees("洪七公");
 
animal = rhino;
//animal = employees;//此时这个值不能赋给animal，并不能编译通过.
 
$(function(){ 
    $("#msg1").html("<span style='color:red'>"+retMsg1+"</span>");
 
});
  • Ts编译成js代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
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; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
/**
 * public/private
 * 默认是public
 * 您可能已经注意到，在我们还没有使用这个词“公众”作出任何类可见的成员的上述例子。
 * 如C＃语言要求每个成员被明确标记为'公共'可见。在打字稿，每个成员都是公共默认。
 * 您可能仍然标记成员的私人，所以你控制什么是公开可见的外部类的
 */
var MyAnimal = (function () {
    //构造方法
    function MyAnimal(theName) {
        this.theName = theName;
        this.name = theName;
    }
    MyAnimal.prototype.getMsg = function (name) {
        return this.name = name;
    };
    return MyAnimal;
})();
//犀牛
var Rhino = (function (_super) {
    __extends(Rhino, _super);
    function Rhino() {
        _super.call(this, "犀牛");
    }
    Rhino.prototype.getMsg = function (name) {
        return name;
    };
    return Rhino;
})(MyAnimal);
//员工
var Employees = (function () {
    //构造方法
    function Employees(theName) {
        this.name = theName;
    }
    return Employees;
})();
var animal = new MyAnimal("山羊"); //Goat山羊
var retMsg1 = animal.getMsg("鹿");
var rhino = new Rhino();
var employees = new Employees("洪七公");
animal = rhino;
//animal = employees;//此时这个值不能赋给animal，并不能编译通过.
$(function () {
    $("#msg1").html("<span style='color:red'>" + retMsg1 + "</span>");
});
 
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../test5.js"></script>
</head>
<body>
    <div id="msg1"></div>
    <br/>
    <div id="msg2"></div>
</body>
</html>

5在class使用高级技巧

  • Ts 文件代码
/**
*高级技巧
*构造函数
*当您声明一个类，你实际上是在同一时间创建多个声明。第一个是类的实例的类型
*/
class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}
var greeter1: Greeter;
    greeter1 = new Greeter();
    alert(greeter1.greet());
 
    var greeterMaker: typeof Greeter = Greeter;
    greeterMaker.standardGreeting = "Hey there!";
    var greeter2:Greeter = new greeterMaker();
    alert(greeter2.greet());
  • Ts编译成js文件代码
/**
*高级技巧
*构造函数
*当您声明一个类，你实际上是在同一时间创建多个声明。第一个是类的实例的类型
*/
var Greeter = (function () {
   function Greeter() {
   }
   Greeter.prototype.greet = function () {
       if (this.greeting) {
           return "Hello, " + this.greeting;
       }
       else {
           return Greeter.standardGreeting;
       }
   };
   Greeter.standardGreeting = "Hello, there";
   return Greeter;
})();
var greeter1;
greeter1 = new Greeter();
alert(greeter1.greet());
var greeterMaker = Greeter;
greeterMaker.standardGreeting = "Hey there!";
var greeter2 = new greeterMaker();
alert(greeter2.greet());

工程源代码

TypeScriptypeScript类的详解

博客所有文章是本人2014年撰写,而GItHub的源代码是有些是2014年与2015年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,874评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,102评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,676评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,911评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,937评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,935评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,860评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,660评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,113评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,238评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,861评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2赞 352

推荐阅读更多精彩内容