22岁的小成今年大学刚毕业，每当他在兄弟们面前回忆起大学生活时，都摆出一副得意的表情，因为他在大学里，受到了太多女孩子的青睐。而问起相貌平平的他为什么如此有魅力时，他居然回答“因为我TypeScript学的特别好。”那么本篇章节，就带大家入门一下TypeScript中的类、继承与接口
TypeScript 类、继承与接口
类
-
类的介绍
原生JavaScript使用函数和基于原型的继承来创建可重用的组件，真正的面向对象编程中的类到ES6才出现，而TypeScript直接允许程序员们使用基于类的面向对象编程，并且编译后的JavaScript可以在所有主流浏览器和平台上运行。
-
类的基本语法
下面举一个使用类的例子：
class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world");这是一个简单的打印语句功能的类，语法与ES6极其相似，对于已经熟悉面向对象编程的人来说，上手很容易。
类的继承
与常用的面向对象模式相似，TypeScript也允许使用继承来扩展现有的类，一个简单的例子：
class Animal {
move(distanceInMeters: number = 0) {
// TypeScript中${...}表示字符串中加入变量
console.log(`Animal moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log('haha');
}
}
const dog = new Dog();
dog.bark(); //haha
dog.move(10); //Animal moved 10m.
dog.bark(); //haha
一个稍微复杂的例子：
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log("shuashua");
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 45) {
console.log("derder");
super.move(distanceInMeters);
}
}
let sam = new Snake("蛇蛇");
let tom: Animal = new Horse("马马");
sam.move();
// shuashua...
// 蛇蛇 moved 5m.
tom.move(34);
// derder...
// 马马 moved 34m.
这个例子中，使用extends关键字创建了Animal的两个子类，但是两个子类中都包含了构造函数constructor，所以必须调用super()来执行基类的构造函数。而且，在构造函数里访问this属性之前，一定要调用super()。这是TypeScript强制执行的一条重要规则！
public(公有)、private(私有) 和protected(受保护)修饰符。
-
默认为公有
public在上面的例子里，程序里定义的成员仿佛可以在外界自由访问，但是我们并没有定义
public，因为在TypeScript中，成员都默认为public。为了认识它，我们重写一遍上面的
Animal类class Animal { public name: string; public constructor(theName: string) { this.name = theName; } public move(distanceInMeters: number) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } -
私有
private当成员被标记为
private时，表示它是私有的，只能自己调用，不能被外界访问到。private私有方法允许继承，不暴露在外面，实例化对象不可调用比如：
class Animal { private name: string; constructor(theName: string) { this.name = theName; } } new Animal("Cat").name; // 错误: 'name' 是私有的. -
受保护
protectedprotected与private类似，但是protected成员在继承它的所有子类中也都可以访问。
接口
在TypeScript中，核心原则之一是对值所具有的结构进行类型检查。在TypeScript里，接口的作用就是为这些类型命名，设置类的接口，可以有效地约束类必须使用设置的接口的所有方法和属性
接口内容只能是public
先来一个简单的案例对比一下接口如何工作：
原始代码如下：
function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = { size: 10, label: "Size 10 Object" }; printLabel(myObj);用接口重写：必须包含一个label属性且类型为string：
interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
真正使用的过程中的一个简单的接口示例：
interface IDivMove{
speed:number;
createElement():HTMLElement;
update():void;
}
interface IEventDispatch{
dispatchs():void;
addEvent(type:string,callBack:Function):void;
}
class HTMLElem implements IDivMove,IEventDispatch{
public speed:number=1;
public createElement():HTMLDivElement{
let div = document.createElement("div");
return div;
}
public update():void{
}
public dispatchs():void{
}
public addEvent():void{
}
}
class HTMLElems implements IDivMove{
public speed:number=1;
public createElement():HTMLSpanElement{
let span = document.createElement("span");
return span;
}
public update():void{
}
}
...
本篇文章介绍了TypeScript入门的一些皮毛，
有关类、继承和接口的知识点还有很多，详情可以参阅 官方文档
网友评论