【第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写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容