《现代TypeScript高级教程》接口和类

107 阅读2分钟
点击在线阅读,体验更好链接
现代JavaScript高级小册链接
深入浅出Dart链接
现代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);</code></pre><p>在这个例子中,<code>LabelledValue</code>接口就像一个名片,告诉其他代码,只要一个对象有<code>label</code>属性,并且类型为<code>string</code>,那么就可以认为它是<code>LabelledValue</code>。</p><p>接口也可以描述函数类型:</p><pre><code class="typescript">interface SearchFunc {
  (source: string, subString: string): boolean;
  }
  
  let mySearch: SearchFunc;
  mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
      return result &gt; -1;
      }</code></pre><p>此外,接口还能用于描述数组和索引类型:</p><pre><code class="typescript">interface StringArray {
        [index: number]: string;
        }
        
        let myArray: StringArray;
        myArray = ["Bob", "Fred"];
        
        interface Dictionary {
          [index: string]: string;
          }
          
          let myDict: Dictionary;
          myDict = { "key": "value" };</code></pre><h3 id="item-0-3">类</h3><p>与传统的 JavaScript 一样,TypeScript 也使用类(Classes)来定义对象的行为。然而,TypeScript 的类具有一些额外的特性,如访问修饰符(Access Modifiers)、静态属性(Static Properties)、抽象类(Abstract Classes)等。</p><p>以下是一个基本的类示例:</p><pre><code class="typescript">class Greeter {
            greeting: string;
              constructor(message: string) {
                  this.greeting = message;
                    }
                      greet() {
                          return "Hello, " + this.greeting;
                            }
                            }
                            
                            let greeter = new Greeter("world");</code></pre><p>TypeScript 还引入了访问修饰符 <code>public</code>、<code>private</code> 和 <code>protected</code>。如果没有指定访问修饰符,则默认为 <code>public</code>。</p><pre><code class="typescript">class Animal {
                              private name: string;
                                constructor(theName: string) { this.name = theName; }
                                }</code></pre><p>TypeScript 类还支持继承,通过<code>extends</code>关键字可以创建一个子类。子类可以访问和改变父类的属性和方法:</p><pre><code class="typescript">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('Wo
                                                    
                                                    of! Woof!');
                                                      }
                                                      }
                                                      
                                                      const dog = new Dog('Tom');
                                                      dog.bark();
                                                      dog.move(10);
                                                      dog.bark();</code></pre><p>为了实现多态,TypeScript 提供了抽象类的概念。抽象类是不能被实例化的类,只能作为其他类的基类。抽象类中可以定义抽象方法,抽象方法必须在派生类中实现:</p><pre><code class="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();</code></pre>