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>"); });