前端开发 / TypeScript 声明合并

TypeScript 声明合并

TypeScript 编译器会将程序中多个具有相同名称的声明合并为一个声明。

但这并不是说 TypeScript 会随意的合并两个名称相同的字符串变量,这显然是不符合语法规定的,那么本节将介绍什么样的声明可以进行合并。

1. 慕课解释

TypeScript 中的声明会创建以下三种实体之一:命名空间、类型或值。

来看以下声明都创建了什么实体:

声明类型 创建了命名空间 创建了类型 创建了值
Namespace
Class
Enum
Interface
Type Alias
Function
Variable

2. 合并接口

最简单也最常见的声明合并类型是接口合并。

interface Box {
  height: number
  width: number
}

interface Box {
  scale: number
  width: number // 类型相同 OK
}

let box: Box = {height: 5, width: 6, scale: 10}

接口合并,则接口的非函数的成员须是唯一的,哪怕不唯一,最起码也要类型相同。但如果类型不同,则编辑器报错。

对于函数成员,每个同名函数声明都会被当成这个函数的一个重载,后面的接口具有更高优先级。

接口合并时,将遵循以下规范:

  • 接口内优先级是从上到下;
  • 后面的接口具有更高优先级;
  • 如果函数的参数是字符串字面量,会被提升到函数声明的最顶端。
interface Document {
  createElement(tagName: any): Element              // 5
}
interface Document {
  createElement(tagName: 'div'): HTMLDivElement     // 2
  createElement(tagName: 'span'): HTMLSpanElement   // 3
}
interface Document {
  createElement(tagName: string): HTMLElement         // 4
  createElement(tagName: 'canvas'): HTMLCanvasElement // 1
}

按照上面介绍的规则,得到合并后的声明:

interface Document {
  createElement(tagName: 'canvas'): HTMLCanvasElement
  createElement(tagName: 'div'): HTMLDivElement
  createElement(tagName: 'span'): HTMLSpanElement
  createElement(tagName: string): HTMLElement
  createElement(tagName: any): Element
}

3. 合并命名空间

合并多个具有相同名称的命名空间:

  • 导出成员不可重复定义
  • 非导出成员仅在其原有的(合并前的)命名空间内可见
namespace A {
  let used = true

  export function fn() {
      return used
  }
}

namespace A {
  export function fnOther() {
      return used // Error, 未找到变量 used
  }
}

A.fn()      // OK
A.fnOther() // OK

代码解释:

第一个命名空间内的非导出成员 used 仅在第一个命名空间内可见。 命名空间对象 A 可以分别访问在第一个或第二个声明的导出成员。

4. 命名空间与其它类型的合并

只要命名空间的定义符合将要合并类型的定义,命名空间就可以与其它类型的声明进行合并,合并结果包含两者的声明类型。

4.1 命名空间与类的合并

合并名称相同的命名空间与类:

  • 命名空间内的成员必须导出,合并后的类才能访问
  • 命名空间内导出的成员,相当于合并后类的静态属性
  • 命名空间要放在类的定义后面
实例演示
预览 复制
复制成功!
class Album {
  label!: Album.AlbumLabel
}
namespace Album {
  export class AlbumLabel { }
  export const num = 10
}

console.log(Album.num) // 10
运行案例 点击 "运行案例" 可查看在线运行效果

注意: 命名空间要放在类的定义后面,命名空间内导出的成员,相当于合并后类的静态属性。

4.2 命名空间与函数的合并

  • 名称相同的命名空间与函数挂载同一个对象
  • 命名空间要放在函数的定义后面
实例演示
预览 复制
复制成功!
function buildLabel(name: string): string {
  return buildLabel.prefix + name + buildLabel.suffix
}

namespace buildLabel {
  export let suffix = '.C'
  export let prefix = 'Hello, '
}

console.log(buildLabel('Mr.Pioneer')) // Hello, Mr.Pioneer.C
运行案例 点击 "运行案例" 可查看在线运行效果

命名空间和函数可以进行合并,是因为在 JavaScript 中函数也是对象。

4.3 命名空间与枚举的合并

命名空间可以用来扩展枚举型:

实例演示
预览 复制
复制成功!
enum Color {
  red = 1,
  green = 2,
  blue = 4
}

namespace Color {
  export function mixColor(colorName: string) {
    switch (colorName) {
      case 'yellow':
        return Color.red + Color.green
      case 'white':
        return Color.red + Color.green + Color.blue
      default:
        break
    }
  }
}

console.log(Color.mixColor('yellow')) // 3
运行案例 点击 "运行案例" 可查看在线运行效果

解释: 枚举本身也是个对象,与命名空间对象合并后对象的属性进行了扩充。

5. 小结

虽然 TypeScript 有声明合并的功能,但是在工作中应尽量避免定义命名相同的声明,合理使用模块来规避这类情况。