download：升级 TypeScript 高手，成为热门的前端开发人才
<span style=”font-size:14px;”><pre name=”code” class=”javascript”>5.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);}
5.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>
5.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>"); });