第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

一飛同學(xué) · 更新于 2020-04-18

TypeScript 聲明合并

TypeScript 編譯器會(huì)將程序中多個(gè)具有相同名稱的聲明合并為一個(gè)聲明。

但這并不是說 TypeScript 會(huì)隨意的合并兩個(gè)名稱相同的字符串變量，這顯然是不符合語法規(guī)定的，那么本節(jié)將介紹什么樣的聲明可以進(jìn)行合并。

1. 慕課解釋

TypeScript 中的聲明會(huì)創(chuàng)建以下三種實(shí)體之一：命名空間、類型或值。

來看以下聲明都創(chuàng)建了什么實(shí)體：

聲明類型 創(chuàng)建了命名空間 創(chuàng)建了類型 創(chuàng)建了值
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}

接口合并，則接口的非函數(shù)的成員須是唯一的，哪怕不唯一，最起碼也要類型相同。但如果類型不同，則編輯器報(bào)錯(cuò)。

對(duì)于函數(shù)成員，每個(gè)同名函數(shù)聲明都會(huì)被當(dāng)成這個(gè)函數(shù)的一個(gè)重載，后面的接口具有更高優(yōu)先級(jí)。

接口合并時(shí)，將遵循以下規(guī)范：

  • 接口內(nèi)優(yōu)先級(jí)是從上到下；
  • 后面的接口具有更高優(yōu)先級(jí)；
  • 如果函數(shù)的參數(shù)是字符串字面量，會(huì)被提升到函數(shù)聲明的最頂端。
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
}

按照上面介紹的規(guī)則，得到合并后的聲明：

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

3. 合并命名空間

合并多個(gè)具有相同名稱的命名空間：

  • 導(dǎo)出成員不可重復(fù)定義
  • 非導(dǎo)出成員僅在其原有的（合并前的）命名空間內(nèi)可見
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

代碼解釋：

第一個(gè)命名空間內(nèi)的非導(dǎo)出成員 used 僅在第一個(gè)命名空間內(nèi)可見。 命名空間對(duì)象 A 可以分別訪問在第一個(gè)或第二個(gè)聲明的導(dǎo)出成員。

4. 命名空間與其它類型的合并

只要命名空間的定義符合將要合并類型的定義，命名空間就可以與其它類型的聲明進(jìn)行合并，合并結(jié)果包含兩者的聲明類型。

4.1 命名空間與類的合并

合并名稱相同的命名空間與類：

  • 命名空間內(nèi)的成員必須導(dǎo)出，合并后的類才能訪問
  • 命名空間內(nèi)導(dǎo)出的成員，相當(dāng)于合并后類的靜態(tài)屬性
  • 命名空間要放在類的定義后面
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
class Album {
  label!: Album.AlbumLabel
}
namespace Album {
  export class AlbumLabel { }
  export const num = 10
}

console.log(Album.num) // 10
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

注意： 命名空間要放在類的定義后面，命名空間內(nèi)導(dǎo)出的成員，相當(dāng)于合并后類的靜態(tài)屬性。

4.2 命名空間與函數(shù)的合并

  • 名稱相同的命名空間與函數(shù)掛載同一個(gè)對(duì)象
  • 命名空間要放在函數(shù)的定義后面
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
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
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

命名空間和函數(shù)可以進(jìn)行合并，是因?yàn)樵?JavaScript 中函數(shù)也是對(duì)象。

4.3 命名空間與枚舉的合并

命名空間可以用來擴(kuò)展枚舉型：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
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
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

解釋： 枚舉本身也是個(gè)對(duì)象，與命名空間對(duì)象合并后對(duì)象的屬性進(jìn)行了擴(kuò)充。

5. 小結(jié)

雖然 TypeScript 有聲明合并的功能，但是在工作中應(yīng)盡量避免定義命名相同的聲明，合理使用模塊來規(guī)避這類情況。