这篇文章练习和确认了typescript中如何进行面向对象编程方式进行设计和编码。
执行和结果确认
[root@飞狐 使用 通达信 接口,angular proj]# gulp
[07:39:42] Using gulpfile /tmp/proj/gulpfile.js
[07:39:42] Starting 'default'...
[07:39:55] Finished 'default' after 13 s
[root@飞狐 使用 通达信 接口,angular proj]# node dist/class-practice-2.js
Bob Smith
[root@飞狐 使用 通达信 接口,angular proj]# 传统的javascript使用函数来创建可重用的组件，而熟悉面向对象设计和开发的则更加熟悉类/接口/集成等面向对象的方式。而这些在ECMAScript2015得到了支持，javascript也可以使用面向对象的设计方法了，但是在ES5尚未完全得到全部支持的现在，通过使用typescript了先行使用此类特性在我们的项目之中。由于面向对象的编程已经是极为基础，我们只需要看一下typescript中是如何实现的即可。我们将会通过几个简单的例子来研究一下相关的基本使用方法。
Animal的类写的非常的简单，但是从这几行简单的代码中，我们可以了解到typescript的一些使用的特点：
执行和结果确认
[root@飞狐 使用 通达信 接口,angular proj]# gulp
[07:27:38] Using gulpfile /tmp/proj/gulpfile.js
[07:27:38] Starting 'default'...
[07:27:52] Finished 'default' after 14 s
[root@飞狐 使用 通达信 接口,angular proj]# node dist/class-practice.js
Dog moved 100m.
super name: Horse
Galloping...
Horse moved 200m.
[root@飞狐 使用 通达信 接口,angular proj]# 稍微对程序进行修改，创建一个Horse类继承Animal类，同时将Animal类的name设定为protected方式。具体代码如下：
[root@飞狐 使用 通达信 接口,angular proj]# cat src/class-practice.ts
class Animal {
protected name: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Horse extends Animal {
public constructor(name: string) { super(name); }
public move(distanceInMeters = 45) {
console.log('super name: ' + this.name);
console.log('Galloping...');
super.move(distanceInMeters);
}
}
let animal = new Animal('Dog');
animal.move(100);
let horse = new Horse('Horse');
horse.move(200);
[root@飞狐 使用 通达信 接口,angular proj]# 就像javabean的get和set方法那样，typescript也支持get和set方式，只是写法稍有不同，比如如下一个例子，我们有一个private的成员变量，而对实例进行直接赋值的使用方式则是因为set和get存在的原因。
[root@飞狐 使用 通达信 接口,angular proj]# grep 2 tsconfig.json
'src/class-practice-2.ts'
[root@飞狐 使用 通达信 接口,angular proj]# cat src/class-practice-2.ts
let passcode = 'secret passcode';
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == 'secret passcode') {
this._fullName = newName;
}
else {
console.log('Error: Unauthorized update of employee!');
}
}
}
let employee = new Employee();
employee.fullName = 'Bob Smith';
if (employee.fullName) {
console.log(employee.fullName);
}
[root@飞狐 使用 通达信 接口,angular proj]#接口方式使用也比较类似，比如如下例子：
[root@飞狐 使用 通达信 接口,angular proj]# cat src/interface-practice.ts
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: 'Size 10 Object'};
printLabel(myObj);
[root@飞狐 使用 通达信 接口,angular proj]#编译&结果确认
[root@飞狐 使用 通达信 接口,angular proj]# gulp
[07:14:13] Using gulpfile /tmp/proj/gulpfile.js
[07:14:13] Starting 'default'...
[07:14:22] Finished 'default' after 9.17 s
[root@飞狐 使用 通达信 接口,angular proj]# node dist/class-practice.js
Dog moved 100m.
[root@飞狐 使用 通达信 接口,angular proj]# 
这篇文章的例子，将会写在一个名为class-practicts的文件之中。首先我们先在这个文件之中实现一个Animal的类。
[root@飞狐 使用 通达信 接口,angular proj]# grep class tsconfig.json
'src/class-practice.ts'
[root@飞狐 使用 通达信 接口,angular proj]#
[root@飞狐 使用 通达信 接口,angular proj]# cat src/class-practice.ts
class Animal {
public name: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
let animal = new Animal('Dog');
animal.move(100);
[root@飞狐 使用 通达信 接口,angular proj]#成员函数需要用this指针进行引用修饰符也是有public/private/protected三种缺省的情况下，成员时public的private只能在定义的类中进行使用protected能够在定义的类和继承的类中使用，但不能在实例中直接引用整体的类等相关使用方式和C#或者C++非常类似readonly修饰符设定只读属性，只能在声明或者构造函数中被初始化虚函数的使用也同C++大同小异
确认编译生成的js代码：
[root@飞狐 使用 通达信 接口,angular proj]# cat dist/class-practice.js
var Animal = /** @class */ (function () {
function Animal(theName) {
this.name = theName;
}
Animal.prototype.move = function (distanceInMeters) {
console.log(this.name + ' moved ' + distanceInMeters + 'm.');
};
return Animal;
}());
var animal = new Animal('Dog');
animal.move(100);
[root@飞狐 使用 通达信 接口,angular proj]#
文章为作者独立观点，不代表股票交易接口观点
相关文章
股民评论