《现代Typescript高级教程》结构化类型

╰半夏微凉° 2023-10-13 21:21 14阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## 类型兼容：结构化类型 ##

TypeScript 是一种基于 JavaScript 的静态类型语言，它为 JavaScript 添加了类型系统，并提供了强大的类型检查和自动补全功能。TypeScript 的类型系统有一个非常重要的特性，那就是 "鸭子类型"(Duck Typing)或 "结构化类型"(Structural Typing)(文章会以"鸭子类型"(Duck Typing)作为简称)。这种特性有时会让人感到惊讶，但它是 TypeScript 增强 JavaScript 开发体验的重要方式之一。

鸭子类型的概念来自一个古老的英语成语：“如果它走起路来像一只鸭子，叫起来也像一只鸭子，那么它就是一只鸭子。”在 TypeScript(或更一般地说，静态类型语言)的上下文中，鸭子类型意味着一个对象的类型不是由它继承或实现的具体类别决定的，而是由它具有的结构决定的。

本文将全面深入地探讨 TypeScript 中的鸭子类型，以及如何在实际的开发中应用和利用鸭子类型。

### 1. 鸭子类型：定义和示例 ###

这是一个简单的鸭子类型示例：

interface Duck {
        walk: () => void;
        quack: () => void;
    }
    
    function doDuckThings(duck: Duck) {
        duck.walk();
        duck.quack();
    }
    
    const myDuck = {
        walk: () => console.log('Walking like a duck'),
        quack: () => console.log('Quacking like a duck'),
        swim: () => console.log('Swimming like a duck')
    };
    
    doDuckThings(myDuck); // OK

在这个例子中，我们定义了一个 `Duck` 接口和一个 `doDuckThings` 函数，这个函数需要一个 `Duck` 类型的参数。然后我们创建了一个 `myDuck` 对象，它有 `walk`、`quack` 和 `swim` 这三个方法。尽管 `myDuck` 并没有显式地声明它实现了 `Duck` 接口，但是由于 `myDuck` 的结构满足了 `Duck` 接口的要求(即 `myDuck` 有 `walk` 和 `quack` 这两个方法)，我们可以将 `myDuck` 作为参数传递给 `doDuckThings` 函数。

这就是鸭子类型的基本概念：只要一个对象的结构满足了接口的要求，我们就可以把这个对象看作是这个接口的实例，而不管这个对象的实际类型是什么。

### 2. 鸭子类型的优点 ###

鸭子类型有许多优点，特别是在编写更灵活和更通用的代码方面。

#### 2.1 代码的灵活性 ####

鸭子类型增加了代码的灵活性。我们可以创建和使用满足特定接口的任何对象，而不必担心它们的具体类型。这使得我们可以更容易地编写通用的代码，因为我们的代码只依赖于对象的结构，而不是对象的具体类型。

#### 2.2 代码的复用 ####

鸭子类型有助于代码的复用。由于我们的函数和方法只依赖于对象的结构，我们可以在不同的上下文中重用这些函数和方法，只要传入的对象满足所需的结构。

例如，我们可以写一个函数，它接受一个具有 `toString` 方法的任何对象，然后返回这个对象的字符串表示。由于几乎所有的 JavaScript 对象都有 `toString` 方法，我们可以在许多不同的上下文中重用这个函数。

#### 2.3 与 JavaScript 的互操作性 ####

鸭子类型提高了 TypeScript 与 JavaScript 的互操作性。由于 JavaScript 是一种动态类型语言，我们经常需要处理的对象可能没有明确的类型。鸭子类型使我们能够在 TypeScript 中安全地处理这些对象，只要它们的结构满足我们的需求。

例如，我们可能从一个 JavaScript 库获取一个对象，这个对象有一个 `forEach` 方法。我们不关心这个对象的具体类型，我们只关心它是否有 `forEach` 方法。使用鸭子类型，我们可以定义一个接口来描述这个对象的结构，然后在 TypeScript 中安全地使用这个对象。

interface Iterable {
        forEach: (callback: (item: any) => void) => void;
    }
    
    function processItems(iterable: Iterable) {
        iterable.forEach(item => console.log(item));
    }
    
    const jsArray = [1, 2, 3]; // From a JavaScript library
    processItems(jsArray); // OK

### 3. 鸭子类型的局限性 ###

尽管鸭子类型有许多优点，但它也有一些局限性。

#### 3.1 类型安全 ####

鸭子类型可能会降低代码的类型安全性。因为 TypeScript 的类型检查器只检查对象是否满足接口的结构，而不检查对象是否真的是接口所期望的类型。如果一个对象恰好有与接口相同的属性和方法，但实际上它并不是接口所期望的类型，TypeScript 的类型检查器可能无法发现这个错误。

例如，我们可能有一个 `Dog` 类型和一个 `Cat` 类型，它们都有一个 `bark` 方法。我们可能会错误地将一个 \`Cat

`对象传递给一个期望`Dog\` 对象的函数，而 TypeScript 的类型检查器无法发现这个错误。

interface Dog {
        bark: () => void;
    }
    
    function letDogBark(dog: Dog) {
        dog.bark();
    }
    
    const cat = {
        bark: () => console.log('Meow...'),  // Cats don't bark!
        purr: () => console.log('Purr...')
    };
    
    letDogBark(cat); // No error, but it's wrong!

在这种情况下，我们需要更仔细地设计我们的类型和接口，以避免混淆。

#### 3.2 易读性和可维护性 ####

鸭子类型可能会降低代码的易读性和可维护性。因为我们的代码只依赖于对象的结构，而不是对象的具体类型，这可能会使代码更难理解和维护。

为了提高易读性和可维护性，我们需要清晰地记录我们的接口和函数期望的对象结构。TypeScript 的类型注解和接口提供了一种强大的工具来实现这一点。

### 4. 使用鸭子类型的最佳实践 ###

在使用鸭子类型时，有一些最佳实践可以帮助我们避免上述问题，并充分利用鸭子类型的优点。

#### 4.1 清晰地定义接口 ####

我们应该清晰地定义我们的接口，以描述我们的函数和方法期望的对象结构。这有助于提高代码的易读性和可维护性。

例如，如果我们有一个函数，它期望一个具有 `name` 和 `age` 属性的对象，我们应该定义一个接口来描述这个结构。

interface Person {
        name: string;
        age: number;
    }
    
    function greet(person: Person) {
        console.log(`Hello, my name is ${person.name} and I'm ${person.age} years old.`);
    }

#### 4.2 适度使用鸭子类型 ####

我们应该适度地使用鸭子类型。虽然鸭子类型有许多优点，但如果过度使用，可能会导致类型安全性的问题，以及易读性和可维护性的降低。我们应该在类型安全性、易读性、可维护性和灵活性之间找到一个平衡。

在某些情况下，我们可能更希望使用类和继承，而不是鸭子类型。例如，如果我们有一组紧密相关的类型，它们有共享的行为和状态，使用类和继承可能更合适。

interface Named {
        name: string;
    }
    
    class Person {
        name: string;
    
        constructor(name: string) {
            this.name = name;
        }
    }
    
    let p: Named;
    // OK, because of structural typing
    p = new Person('mike');

在这个例子中，尽管 `Person` 类并没有显式地实现 `Named` 接口，但是因为 `Person` 类有一个 `name` 属性，所以我们可以把 `Person` 的实例赋值给 `Named` 类型的变量。这是由于 TypeScript 的 "鸭子类型" 或 "结构化类型" 系统导致的。