1. 类
1.1 定义类
在TypeScript中，定义类使用关键字class，后面接类名；定义三个属性name、age和qq，类的构造函数；定义类方法queryInfo，返回结果为三个属性的拼接字符串。实例化对象a，调用类A，并传入三个参数，然后依次打印三个属性，调用方法。
class A {
name: string;
age: number;
qq: string;
constructor(name:string, age: number, qq: string) {
this.name = name;
this.age = age;
this.qq = qq;
}
queryInfo() {
return `姓名：${this.name},年龄：${this.age},QQ：${this.qq}`;
}
}
let a = new A("张华",30,"4545455498652");
console.log(a.name,a.age,a.qq,a.queryInfo());
1.2 编译成JS
使用TypeScript命令可以将ts文件编译成js文件（新生成的）
var A = /** @class */ (function () {
function A(name, age, qq) {
this.name = name;
this.age = age;
this.qq = qq;
}
A.prototype.queryInfo = function () {
return "\u59D3\u540D\uFF1A" + this.name + ",\u5E74\u9F84\uFF1A" + this.age + ",QQ\uFF1A" + this.qq;
};
return A;
}());
var a = new A("张华", 30, "4545455498652");
console.log(a.name, a.age, a.qq, a.queryInfo());
1.3 实例应用
将编译好的js文件引入到HTML5页面中，然后在浏览器中预览，查看控制台打印结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TypeScript类</title>
<script src="cts/a.js"></script>
</head>
<body>
</body>
</html>
1.4 实现效果
实现效果
2. 类继承
2.1 实例源码
类的继承跟Java语言一样，使用extends关键字
class Animal {
name: string;
constructor(name:string) {
this.name = name;
}
eat(m:number) {
console.log(`${this.name}吃了${m}`)
}
}
class A extends Animal {
constructor(name:string) {
super(name);
}
eat(m=10) {
super.eat(m)
}
}
let a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));
2.2 编译JS代码
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Animal = /** @class */ (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function (m) {
console.log(this.name + "\u5403\u4E86" + m);
};
return Animal;
}());
var A = /** @class */ (function (_super) {
__extends(A, _super);
function A(name) {
return _super.call(this, name) || this;
}
A.prototype.eat = function (m) {
if (m === void 0) { m = 10; }
_super.prototype.eat.call(this, m);
};
return A;
}(Animal));
var a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));
2.3 实例效果
实例效果
3. 多类继承
3.1 实例源码
多类继承是指多个类继承同一个类，如类A、类B都继承类Animal
class Animal {
name: string;
constructor(name:string) {
this.name = name;
}
eat(m:number) {
console.log(`${this.name}吃了${m}`)
}
}
class A extends Animal {
constructor(name:string) {
super(name);
}
eat(m=10) {
super.eat(m)
}
}
class B extends Animal {
constructor(name:string) {
super(name);
}
eat(m=100) {
super.eat(m);
}
run(r:number) {
console.log(`${this.name}跑的很快,${r}`);
}
}
let a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));
let b = new B('老虎');
console.log(b.name);
console.log(b.eat(20000));
console.log(b.run(20));
3.2 编译JS代码
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Animal = /** @class */ (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function (m) {
console.log(this.name + "\u5403\u4E86" + m);
};
return Animal;
}());
var A = /** @class */ (function (_super) {
__extends(A, _super);
function A(name) {
return _super.call(this, name) || this;
}
A.prototype.eat = function (m) {
if (m === void 0) { m = 10; }
_super.prototype.eat.call(this, m);
};
return A;
}(Animal));
var B = /** @class */ (function (_super) {
__extends(B, _super);
function B(name) {
return _super.call(this, name) || this;
}
B.prototype.eat = function (m) {
if (m === void 0) { m = 100; }
_super.prototype.eat.call(this, m);
};
B.prototype.run = function (r) {
console.log(this.name + "\u8DD1\u7684\u5F88\u5FEB," + r);
};
return B;
}(Animal));
var a = new A('蜘蛛');
console.log(a.name);
console.log(a.eat(200));
var b = new B('老虎');
console.log(b.name);
console.log(b.eat(20000));
console.log(b.run(20));
3.3 实例效果
实例效果
网友评论