欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析TypeScript 命名空間

 更新時間：2020年03月19日 14:26:16   作者：X W F  
命名空間一個最明確的目的就是解決重名問題。這篇文章主要介紹了TypeScript 命名空間的相關(guān)知識，本文通過實例詳解給大家介紹的非常詳細,需要的朋友可以參考下

TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標準。

TypeScript 由微軟開發(fā)的自由和開源的編程語言。

TypeScript 設(shè)計目標是開發(fā)大型應(yīng)用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上。

命名空間一個最明確的目的就是解決重名問題。

假設(shè)這樣一種情況，當一個班上有兩個名叫小明的學生時，為了明確區(qū)分它們，我們在使用名字之外，不得不使用一些額外的信息，比如他們的姓（王小明，李小明），或者他們父母的名字等等。

命名空間定義了標識符的可見范圍，一個標識符可在多個名字空間中定義，它在不同名字空間中的含義是互不相干的。這樣，在一個新的名字空間中可定義任何標識符，它們不會與任何已有的標識符發(fā)生沖突，因為已有的定義都處于其他名字空間中。

TypeScript 中命名空間使用 namespace 來定義，語法格式如下：

namespace SomeNameSpaceName { 
 export interface ISomeInterfaceName {  } 
 export class SomeClassName {  } 
}

以上定義了一個命名空間 SomeNameSpaceName，如果我們需要在外部可以調(diào)用 SomeNameSpaceName 中的類和接口，則需要在類和接口添加 export 關(guān)鍵字。

要在另外一個命名空間調(diào)用語法格式為：

SomeNameSpaceName.SomeClassName;

如果一個命名空間在一個單獨的 TypeScript 文件中，則應(yīng)使用三斜杠 /// 引用它，語法格式如下：

/// <reference path = "SomeFileName.ts" />

以下實例演示了命名空間的使用，定義在不同文件中：

IShape.ts 文件代碼：

namespace Drawing { 
 export interface IShape { 
  draw(); 
 }
}

Circle.ts 文件代碼：

/// <reference path = "IShape.ts" /> 
namespace Drawing { 
 export class Circle implements IShape { 
  public draw() { 
   console.log("Circle is drawn"); 
  } 
 }
}

Triangle.ts 文件代碼：

/// <reference path = "IShape.ts" /> 
namespace Drawing { 
 export class Triangle implements IShape { 
  public draw() { 
   console.log("Triangle is drawn"); 
  } 
 } 
}

TestShape.ts 文件代碼：

/// <reference path = "IShape.ts" /> 
/// <reference path = "Circle.ts" /> 
/// <reference path = "Triangle.ts" /> 
function drawAllShapes(shape:Drawing.IShape) { 
 shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

使用 tsc 命令編譯以上代碼：

tsc --out app.js TestShape.ts 

得到以下 JavaScript 代碼：

JavaScript
/// <reference path = "IShape.ts" /> 
var Drawing;
(function (Drawing) {
 var Circle = /** @class */ (function () {
  function Circle() {
  }
  Circle.prototype.draw = function () {
   console.log("Circle is drawn");
  };
  return Circle;
 }());
 Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));
/// <reference path = "IShape.ts" /> 
var Drawing;
(function (Drawing) {
 var Triangle = /** @class */ (function () {
  function Triangle() {
  }
  Triangle.prototype.draw = function () {
   console.log("Triangle is drawn");
  };
  return Triangle;
 }());
 Drawing.Triangle = Triangle;
})(Drawing || (Drawing = {}));
/// <reference path = "IShape.ts" /> 
/// <reference path = "Circle.ts" /> 
/// <reference path = "Triangle.ts" /> 
function drawAllShapes(shape) {
 shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

使用 node 命令查看輸出結(jié)果為：

$ node app.js
Circle is drawn
Triangle is drawn

嵌套命名空間

命名空間支持嵌套，即你可以將命名空間定義在另外一個命名空間里頭。

namespace namespace_name1 { 
 export namespace namespace_name2 {
  export class class_name { } 
 } 
}

成員的訪問使用點號 . 來實現(xiàn)，如下實例：

Invoice.ts 文件代碼：

namespace Runoob { 
 export namespace invoiceApp { 
  export class Invoice { 
   public calculateDiscount(price: number) { 
   return price * .40; 
   } 
  } 
 } 
}

InvoiceTest.ts 文件代碼：

/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

使用 tsc 命令編譯以上代碼：

tsc --out app.js InvoiceTest.ts

得到以下 JavaScript 代碼：

JavaScript
var Runoob;
(function (Runoob) {
 var invoiceApp;
 (function (invoiceApp) {
  var Invoice = /** @class */ (function () {
   function Invoice() {
   }
   Invoice.prototype.calculateDiscount = function (price) {
    return price * .40;
   };
   return Invoice;
  }());
  invoiceApp.Invoice = Invoice;
 })(invoiceApp = Runoob.invoiceApp || (Runoob.invoiceApp = {}));
})(Runoob || (Runoob = {}));
/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

使用 node 命令查看輸出結(jié)果為：

$ node app.js
200

TypeScript 語言特性

TypeScript 是一種給 JavaScript 添加特性的語言擴展。增加的功能包括：

  • 類型批注和編譯時類型檢查
  • 類型推斷
  • 類型擦除
  • 接口
  • 枚舉
  • Mixin
  • 泛型編程
  • 名字空間
  • 元組
  • Await

以下功能是從 ECMA 2015 反向移植而來：

  • 類
  • 模塊
  • lambda 函數(shù)的箭頭語法
  • 可選參數(shù)以及默認參數(shù)

JavaScript 與 TypeScript 的區(qū)別

TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型注解提供編譯時的靜態(tài)類型檢查。

TypeScript 可處理已有的 JavaScript 代碼，并只對其中的 TypeScript 代碼進行編譯。

總結(jié)

到此這篇關(guān)于TypeScript 命名空間的文章就介紹到這了,更多相關(guān)TypeScript 命名空間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

    如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

    在開發(fā)過程中,可能會遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換
    2024-09-09
  • 簡單實現(xiàn)js間歇或無縫滾動效果

    簡單實現(xiàn)js間歇或無縫滾動效果

    這篇文章主要為大家詳細介紹了如何簡單便捷的實現(xiàn)js間歇或無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-06-06
  • JavaScript實現(xiàn)鼠標移動事件畫筆

    JavaScript實現(xiàn)鼠標移動事件畫筆

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標移動事件畫筆，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • 最佳的addEvent事件綁定是怎樣誕生的

    最佳的addEvent事件綁定是怎樣誕生的

    IE的 JScript 存在內(nèi)存泄露的bug 想必大家都清楚或者有耳聞了。這是由于IE的內(nèi)存回收管理器的一個設(shè)計錯誤導(dǎo)致的
    2011-10-10
  • JavaScript利用normalizr實現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換

    JavaScript利用normalizr實現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換

    當我們需要進行數(shù)據(jù)轉(zhuǎn)換以便拆分和維護時，可以使用redux作者 Dan Abramov 編寫的normalizr來處理數(shù)據(jù)，本文將為大家詳細講講其用法，感興趣的可以了解一下
    2022-07-07
  • 淺談JavaScript作用域和閉包

    淺談JavaScript作用域和閉包

    本篇文章主要介紹了JavaScript作用域和閉包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • JavaScript綁定事件監(jiān)聽函數(shù)的通用方法

    JavaScript綁定事件監(jiān)聽函數(shù)的通用方法

    這篇文章主要為大家詳細介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法，感興趣的朋友可以參考一下
    2016-05-05

    • 最新評論