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

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

类型兼容:结构化类型

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

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

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

1. 鸭子类型:定义和示例

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

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

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 对象,它有 walkquackswim 这三个方法。尽管 myDuck 并没有显式地声明它实现了 Duck 接口,但是由于 myDuck 的结构满足了 Duck 接口的要求(即 myDuckwalkquack 这两个方法),我们可以将 myDuck 作为参数传递给 doDuckThings 函数。

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

2. 鸭子类型的优点

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

2.1 代码的灵活性

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

2.2 代码的复用

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

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

function toString(obj: { toString: () => string }) {
    return obj.toString();
}
console.log(toString(123)); // "123"
console.log(toString([1, 2, 3])); // "1,2,3"
console.log(toString({ a: 1, b: 2 })); // "[object Object]"

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 清晰地定义接口

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

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

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 的 "鸭子类型" 或 "结构化类型" 系统导致的。

目录
相关文章
|
8天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
45 7
|
1天前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
7天前
|
JavaScript 前端开发
TypeScript内置类型一览(Record<string,any>等等)(下)
TypeScript内置类型一览(Record<string,any>等等)
|
7天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(中)
TypeScript内置类型一览(Record<string,any>等等)
|
7天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(上)
TypeScript内置类型一览(Record<string,any>等等)
|
8天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
8天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
8天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
8天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型
|
8天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型