TypeScript实例讲解(十五)

412 阅读2分钟

这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战

接上一篇:TypeScript实例讲解(十四)

本篇内容:TypeScript 声明合并。

声明合并

在 TypeScript 中声明合并是指编译器将针对同一个名称的两个或多个独立声明合并为单一声明。合并后的声明同时拥有原先所有声明的特性。任何数量的声明都可被合并,并不局限于两个声明。

TypeScript 中的声明会创建以下三种实体之一:命名空间类型。创建命名空间的声明会新建一个命名空间,它包含了用 (.) 符号来访问时使用的名字。创建类型的声明是:用声明的模型创建一个类型并绑定到给定的名字上。最后,创建值的声明会创建在 JavaScript 输出中看到的值。

Declaration TypeNamespaceTypeValue
Namespacexx
Classxx
Enumxx
Interfacex
Type Aliasx
Functionx
Variablex
函数合并
// 例 1
function print(param1: number, param2: string)
function print(param1: String, param2: number)
function print(param1: any, param2: any) {
    // 根据函数参数类型作出不同的行为,这里就简单打印出来
    console.log(param1, param2)
}

前面我们了解过 函数重载,使用重载定义多个函数类型。

接口合并
// 例 2
interface User {
    firstName: string
    lastName: string
}
interface User {
    age: number
}

接口合并是最常见的声明合并,接口合并就是把各个同名接口的成员放到一个接口中。例2相当于下面的例3:

// 例 3
interface User {
    firstName: string
    lastName: string
    age: number
}

注意:接口合并的成员可以重复,但是重复成员的类型必须一致。对于函数成员,同名的每个函数成员都被视为同一函数的重载。

类的合并

类的合并与接口的合并规则一致。

命名空间合并
// 例 4
namespace Model {
    export class Mask {
          // todo
    }
}
namespace Model {
    export interface Show { duration: number; }
    export class Content {
          // todo
    }
}

同名的命名空间也会合并其成员,模块导出的同名接口进行合并,构成单一命名空间内含合并后的接口。例4的命名空间合并之后相当于下面的例5:

// 例 5
namespace Model {
    export interface Show { duration: number; }
    export class Mask {
          // todo
    }
    export class Content {
          // todo
    }
}

注意:TypeScript 中并不是所有的都可以合并,比如类不能与其它类或变量合并。

本篇完!如果文章对你有一点点帮助,请记得点个赞哦。