和C++，C#那些可以面向对象的语言那样，TS也可以面向对象。
与JS相比，TS更像传统的面向对象语言（如Java，C#）。所以，TS有类。
一、类
定义一个类，要用关键字【class】。
class Animai {
name: string
eat(): void {
alert(this.name + ‘吃‘);
}
sleep(): void {
alert(this.name + ‘睡觉‘)
}
breath(): void {
alert(this.name + ‘呼吸‘);
}
constructor(name: string) {
this.name = name;
}
}
这里定义了一个类Animal，constructor是它的构造函数。与C++不同，TS的构造函数的名字必须是constructor，而不是与类名相同。由于TS有GC，所以TS的类没有析构函数。
Animal中有个成员变量name，还有三个方法：eat、sleep、breath。一个类的对象调用类的方法也是通过点号（.），例如：
var ani: Animal = new Animal(‘杰瑞‘); ani.eat();
二、继承
TS通过关键字extends实现继承。下面的代码，有一个类Fish继承了Animal，并重写了breath方法。
class Fish extends Animai {
constructor(name: string) {
super(name);
}
breath(): void {
alert(this.name + ‘吐泡‘);
}
}
三、多态
如果没有多态，继承就会黯然失色。
下面的函数实现了Animal的多态。
function Breath(p: Animai): void {
p.breath();
}
如果p是一个Animal，则会显示“呼吸”，如果p是一个Fish，则会显示“吐泡”。
多态的用法和C++的多态极其类似。不妨比较一下：
class X
{
public:
virtual ~X(){}
virtual void Func()
{
std::cout << "X::Func" << std::endl;
}
};
class Y : public X
{
public:
virtual ~Y(){}
void Func() override
{
std::cout << "Y::Func" << std::endl;
}
};
void Test(X &x)
{
x.Func();
}
void main()
{
X x;
Y y;
Test(x); // X::Func
Test(y); // Y::Func
}
四、与HTML配合
前端编程语言还是要和HTML配合的。下面给出一个例子，其中用到了继承与多态。
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TypeScript</title> <script src="app.js"></script> </head> <body> <h1>TypeScript</h1> <p><input id="btn1" type="button" value="动物呼吸" /></p> <p><input id="btn2" type="button" value="鱼吐泡" /></p> </body> </html>
TypeScript部分：
class Animai {
name: string
eat(): void {
alert(this.name + ‘吃‘);
}
sleep(): void {
alert(this.name + ‘睡觉‘)
}
breath(): void {
alert(this.name + ‘呼吸‘);
}
constructor(name: string) {
this.name = name;
}
}
class Fish extends Animai {
constructor(name: string) {
super(name);
}
breath(): void {
alert(this.name + ‘吐泡‘);
}
}
function Breath(p: Animai): void {
p.breath();
}
window.onload = () => {
var a: Animai = new Animai(‘杰瑞‘);
var f: Fish = new Fish(‘迈克‘);
var btn1 = document.getElementById(‘btn1‘);
var btn2 = document.getElementById(‘btn2‘);
btn1.onclick = () => {
Breath(a);
}
btn2.onclick = () => {
Breath(f);
}
};
效果如下：
时间： 2024-10-09 01:12:40