关于前端:现代TypeScript高级教程接口和类

接口和类

在 TypeScript 中，接口（Interfaces）和类（Classes）是实现面向对象编程（Object-Oriented Programming，OOP）的根底工具。这些工具提供了一种形式来定义和组织简单的数据结构和行为。

接口

接口在 TypeScript 中扮演着要害的角色，用于强类型零碎的反对。接口能够形容对象的形态，使咱们能够编写出预期的行为。接口可用于形容对象、函数或者类的公共局部。

以下是一个根本的接口示例：

interface LabelledValue {  label: string;}function printLabel(labelledObj: LabelledValue) {  console.log(labelledObj.label);}let myObj = { size: 10, label: "Size 10 Object" };printLabel(myObj);

在这个例子中，LabelledValue接口就像一个名片，通知其余代码，只有一个对象有label属性，并且类型为string，那么就能够认为它是LabelledValue。

接口也能够形容函数类型：

interface SearchFunc {  (source: string, subString: string): boolean;}let mySearch: SearchFunc;mySearch = function(src: string, sub: string): boolean {  let result = src.search(sub);  return result > -1;}

此外，接口还能用于形容数组和索引类型：

interface StringArray {  [index: number]: string;}let myArray: StringArray;myArray = ["Bob", "Fred"];interface Dictionary {  [index: string]: string;}let myDict: Dictionary;myDict = { "key": "value" };

类

与传统的 JavaScript 一样，TypeScript 也应用类（Classes）来定义对象的行为。然而，TypeScript 的类具备一些额定的个性，如拜访修饰符（Access Modifiers）、动态属性（Static Properties）、抽象类（Abstract Classes）等。

以下是一个根本的类示例：

class Greeter {  greeting: string;  constructor(message: string) {    this.greeting = message;  }  greet() {    return "Hello, " + this.greeting;  }}let greeter = new Greeter("world");

TypeScript 还引入了拜访修饰符 public、private 和 protected。如果没有指定拜访修饰符，则默认为 public。

class Animal {  private name: string;  constructor(theName: string) { this.name = theName; }}

TypeScript 类还反对继承，通过extends关键字能够创立一个子类。子类能够拜访和扭转父类的属性和办法：

class Animal {  name: string;  constructor(theName: string) { this.name = theName; }  move(distanceInMeters: number = 0) {    console.log(`${this.name} moved ${distanceInMeters}m.`);  }}class Dog extends Animal {  constructor(name: string) { super(name); }  bark() {    console.log('Woof! Woof!');  }}const dog = new Dog('Tom');dog.bark();dog.move(10);dog.bark();

为了实现多态，TypeScript 提供了抽象类的概念。抽象类是不能被实例化的类，只能作为其余类的基类。抽象类中能够定义形象办法，形象办法必须在派生类中实现：

abstract class Animal {  abstract makeSound(): void;  move(): void {    console.log('roaming the earth...');  }}class Dog extends Animal {  makeSound() {    console.log('Woof! Woof!');  }}const myDog = new Dog();myDog.makeSound();myDog.move();