本文章是由機器翻譯。

新式應用程式

在新式應用程式中使用 TypeScript

Rachel Appel

Rachel AppelJavaScript 的原意,是為小的 DOM 樹中的文件物件模型 (DOM) 操作。隨著時間推移,然而,JavaScript 已經成為如此受歡迎它現在是一種主流語言對於任何種類的應用程式,從小型市場應用程式到應用程式的企業。JavaScript 的大眾化繼續增長,工具和語言支援它的開發者所需的人數上升是不可避免的與被一種語文的手稿。

什麼是手稿,它是如何工作?

手稿是允許您編寫和生成 JavaScript 代碼的行為更強烈類型化和麵向物件的但保留的靈活性,開發商愛 (或有時恨) 對 JavaScript 的 JavaScript 的超集合。手稿提升到企業應用程式、 Web 網站和應用程式在哪裡 JavaScript 已從歷史上看瘋狂由於缺乏工具的空間中運行此領域使用 JavaScript 的可行範圍。

Tsc.exe,開放原始碼手稿編譯器的代碼產生器,是可供下載在 typescriptlang.org。手稿是一個獨立的編譯器,所以您可以打開命令提示符並執行用適當的參數 tsc.exe 在任何時間,就像這樣:

tsc.exe --out outputfile.js inputfile.ts

您編寫的代碼手稿,然後旋轉它通過編譯器和出來生產 JavaScript。 雖然手稿是一個代碼產生器,它不會輸出不必要的代碼 (如往往是為了一種視覺化設計工具)、 刪改變數名稱或更改變數的順序。 這意味著它是易於調試的最終產品,因為它是直立 JavaScript。

JavaScript 已經是一種物件導向的語言,但其頓悟的語法是飽餐對許多開發人員。 若要解決此問題,手稿添加功能 JavaScript 如類和介面,ECMAScript 6 (ES6) 標準的建議功能。 這使得代碼產生器涵蓋的手稿在句法的糖,在大多數情況下降低的 JavaScript 來維持量。 例如,下面的代碼使用的頓悟的語法:

function Animal(name, species, habitat) {
  this.
name = name;
  this.species = species;
  this.habitat = habitat;
}
Animal.prototype.sayHello = function(){
  console.log("RAWR!");
}
var animal =   new Animal("Fluffy", 
  "Velociraptor ", 
  "Everywhere.
Run and hide.");
animal.sayHello();

前面的示例從一個建構函式,沒有周圍的類的定義,你通常會在其他物件導向語言中看到的大量使用 JavaScript 模式開始。 你定義什麼是類似于內部建構函式的類的實例成員由使用此關鍵字。 建構函式外的作用就是將 JavaScript 方法綁定到類的實際原型方法。 手稿中的類允許您編寫相同的代碼在前面的示例,但用一種更自然的語法,如中所示圖 1

圖 1 手稿類

class Animal
{  
  name: string;
  species: string;
  habitat: string;
  constructor(name: string, species: string, habitat: string)
  {
    this.
name = name;
    this.species = species;
    this.habitat = habitat;
  }
  sayhello()
  {
    Console.log("RAWR");
  }
}

許多開發人員手稿到代碼中的示例圖 1 是比傳統的 JavaScript 等效更具可讀性。 顯然,代碼作為一個類定義和成員的清單,它顯示的參數類型。 手稿還提供類型檢查、 介面、 靜態編譯時檢查,樣式 lambda 運算式和好吃的東西通常在發現編譯 — — 不解釋 — — 語言。 這些擴展的 JavaScript 語言是有益的因為他們把你從落入常見的編碼缺陷。

其他常見的 JavaScript 挑戰出現時具有公共範圍的變數太多存在 JavaScript 全域命名空間中,從而導致全域命名空間污染 (其中似乎發生都過於頻繁)。 幸運的是,手稿有助於在這種情況下,因為它實現了模組的行為類似的命名空間並創建防止全球雜波的封鎖。 手稿中的模組有兩個特點:內部和外部。 內部模組包含的代碼聲明瞭在當前檔中,你必須通過和導入的外部模組添加 / / < 引用路徑 =' 路徑/參考-file.ts 的 / > 到當前代碼檔的頂端。 您可以聲明模組與模組關鍵字,需要僅花括弧來關閉。 手稿模組看起來像這樣:

module outerModule {
  "use strict";
  module innerModule {
    export function aFunction { s: string };
    export var variable = 1;
  }
}

併發出的 JavaScript 看起來像這樣:

var outerModule;
(function (outerModule) {
  "use strict";
  var innerModule;
  (function (innerModule) {
    function aFunction() { s: string }
    innerModule.aFunction = aFunction;
    innerModule.variable = 1;
  })(innerModule || (innerModule = {}));
})(outerModule || (outerModule = {}));

前面的代碼創建一個單身模組實例可從任何地方的 Windows 應用程式商店在 outerModule 命名空間中。 正如您所看到的模組將呈現為匿名函數 (即,立即調用函數運算式或一生中)。 標記為出口指令的任何成員具有全域範圍,相當於 C# 成員用內部關鍵字標記 (即,專案範圍內)。

配置和生成 Windows 存儲應用程式與手稿

手稿和Visual Studio,之間存在的緊密集成,但手稿船分開,所以您需要安裝下列工具除了Visual Studio2012年快遞、 Pro 或終極版:

安裝後,擴展,您能找到Visual Studio的手稿專案範本位於下方在新建專案對話方塊中的 JavaScript 節點。 此特定的內置範本是 HTML 用戶端 Web 應用程式範本與適當的手稿資產內置的所以你需要做什麼為此範本的工作。

甚至與Visual Studio和手稿之間的緊密集成,在寫這篇文章的時候沒有內置的 Windows 存儲專案範本與手稿 (僅用戶端 Web 範本前面所提到的) ; 然而,手稿文獻說它們很快就要來。 同時,如果您正在構建 Windows 應用商店的應用,JavaScript,你可以使用任何當前的 JavaScript 專案範本如空白、 網格、 拆分和更多。 手稿自動工作他們所有,但您需要使專案得到的事情發生一些輕微的修改。

要將手稿集成到現有的 Windows 應用商店 app,您需要將以下的宣言檔案複製到一個資料夾中,例如 < 專案根目錄 > \tslib:

  • lib.d.ts
  • winjs.d.ts
  • winrt.d.ts

這些檔是可用在手稿下載頁面在 typescript.codeplex.com。 請注意,在列出的檔的檔副檔名結束。 d.ts,在其中"d"代表著宣言 》。 這些檔包含型別宣告為最受歡迎的框架 (如 jQuery 或本機 Windows 運行庫 (WinRT) 和 Windows 庫 (WinJS) JavaScript 庫。 圖 2包含 winjs.d.ts 檔,概述了常用的 WinJS 方法的示例。 請注意該檔是完整的公共聲明由Visual Studio或其他工具用於編譯時檢查。 因為此時手稿仍然是有一點不成熟的可能有一些缺失,但您可以添加它們自己。

圖 2 檢查 winjs.d.ts 定義檔

declare module WinJS {
  export function strictProcessing(): void;
  export module Binding {
    export function as(data: any): any;
    export class List {
      constructor (data: any[]);
      public push(item: any): any;
      public indexOf(item: any): number;
      public splice(index: number, count: number, newelems: any[]): any[];
      public splice(index: number, count: number): any[];
      public splice(index: number): any[];
      public createFiltered(predicate: (x: any) => bool): List;
      public createGrouped(keySelector: (x: any) => any, dataSelector:
         (x: any) => any): List;
        public groups: any;
        public dataSource: any;
        public getAt: any;
      }
      export var optimizeBindingReferences: bool;
  }
  export module Namespace {
    export var define: any;
    export var defineWithParent: any;
  }
  export module Class {
    export function define(constructor: any, instanceMembers: any): any;
    export function derive(
      baseClass: any, constructor: any, instanceMembers: any): any;
    export function mix(constructor: any, mixin: any): any;
  }
  export function xhr(options: { type: string; url: string; user: string;
     password: string; headers: any; data: any;
     responseType: string; }): WinJS.Promise;
  export module Application {
    export interface IOHelper {
      exists(filename: string): bool;
      readText(fileName: string, def: string): WinJS.Promise;
      readText(fileName: string): WinJS.Promise;
      writeText(fileName: string, text: string): WinJS.Promise;
      remove(fileName: string): WinJS.Promise;
    }
// More definitions

如果您編寫應用程式 WinJS 你應該很熟悉這些方法存根 (stub),包括 WinJS.Binding.List 和 WinJS.xhr 的物件 — — 所有的 WinRT/WinJS 圖書館存根都在您的處置。 這些定義檔允許IntelliSense在Visual Studio工作。

將開機檔案添加到專案中的任何資料夾會導致Visual Studio自動創建相應的.js 和。 min.js (縮減) 助理檔。 手稿將開機檔案保存在Visual Studio中每次重新生成這些檔。

在大多數 Windows 存儲 JavaScript 的範本名為頁面的資料夾包含子資料夾與所需的每個頁面的集體.html、.css 和.js 資產。 除了這些檔有更多的 JavaScript 檔中 \js 資料夾,如 data.js、 default.js 和 navigator.js。 您必須為每個執行以下步驟,從而將手稿集成到這些檔:

  1. 添加到頂部的每個檔,例如,/ / 聲明引用 < 引用路徑 =' 路徑/參考-file.ts 的 / >。
  2. 啟動副檔名重命名的.js 檔。
  3. 修改現有 JavaScript 對手稿的相應語言構造,是、 模組、 類、 聲明等。

例如,要將集成 \js\data.js,你需要在檔的頂部插入引用並將頂級函數轉換為一個模組中的代碼像圖 3。 如果你將 data.js 重命名為 data.ts,Visual Studio將創建相應的.js 和保存對檔的映射檔。

圖 3 從 data.js 到 data.ts 的手稿轉變

// Original code in data.js
(function () {
  "use strict";
  var list = new WinJS.Binding.List();
  var groupedItems = list.createGrouped(
    function groupKeySelector(item) { return item.group.key; },
    function groupDataSelector(item) { return item.group; }
  );
  // TODO: Replace the data with your real data
  // You can add data from asynchronous sources
  // whenever it becomes available
  generateSampleData().forEach(function (item) {
    list.push(item);
  });
  // ...
More data-access code
})();
// The modified data.ts file
///<reference path='../ts/winjs.d.ts' />
///<reference path='../ts/winrt.d.ts' />
  module TypeScriptApp {
    "use strict";
    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
      function groupKeySelector(item) { return item.group.key; },
      function groupDataSelector(item) { return item.group; }
  );
  // TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available
  generateSampleData().forEach(function (item) {
    list.push(item);
  });
  // ...
More data-access code
}

中的代碼圖 3 作為一個頂級的命名空間 (模組) 使用的專案的名稱,TypeScriptApp,Visual Studio使用者所熟悉的標準約定將堅持。

當然,你可以總是留下當前 JavaScript 從保持不變的範本和代碼將仍然正常運行,但它並不在其樣式或語法,使得維護難一致。

Visual Studio手稿的選項

有你需要知道的手稿,尤其是在 Windows 應用商店的應用程式的最佳使用的設置。 因為那裡是沒有需要 Windows 應用商店的應用程式中的還是測試的.js 檔,您可以更改"Minify 生成 JavaScript"選項為 False 的精要 Web 選項卡中從Visual Studio工具 |選項對話方塊中設置,並刪除任何可能存在。 還是測試的檔改進 Web 網站的性能只 — — 不是用戶端應用程式 — — 因為他們減少跨互聯網的總體所需的頻寬。

手稿在 Windows 應用商店的應用程式中使用的另一個必要變化是設置到"將 JS 重新保存與 UTF 8 BOM"編碼 (見 bit.ly/ceKkYq) 在工具 |選項對話方塊。 設置到 UTF-8 的物料清單 (位元組順序標記) 使應用程式在啟動時,更好地執行秉承 Windows 存儲進程生命週期管理準則 (看我的 Windows 8 特別問題專欄,生命週期"Windows 存儲應用程式中," msdn.microsoft.com/magazine/jj660301 更多關於這些準則)。 除了性能,此編碼規範是通過 Windows 應用商店認證和發佈您的應用程式所必需的。

JavaScript 開發人員都知道像源映射工具是與安置­用於調試已部署的代碼或原始程式碼從 JavaScript 發電機展旅遊城市。 這是因為源地圖是映射到其他代碼,通常標準中小企業發展的檔還是測試和聯合生產檔與之間不是很容易調試的代碼的檔。 設置為 True 的Visual Studio的選項以創建源地圖手稿和 JavaScript 來啟用手稿調試之間的"生成源地圖"。 此選項適用 — — sourcemap 編譯器開關,它反過來在編譯時創建地圖。

預設情況下,手稿編譯器編譯到 ECMAScript 3 (ES3)-相容代碼 ; 然而,你可以編譯到 ECMAScript 5 (ES5) 如果您更改"對虛假的Visual Studio,設置的 tsc 編譯器標誌 — — 目標生成 ES5 代碼 ECMAScript 3"選項編譯。 開發人員希望使用屬性樣式語法或任何 ES5 或擬議的 ES6 手稿功能應設置此開關。

額外的好處

JavaScript 在這裡停留,這是比以往任何時候都那麼那些人從移動到 JavaScript 的已編譯的語言的土地現在有手稿,説明他們編寫和管理應用程式規模的 JavaScript 代碼的更受歡迎。 JavaScript 開發人員受益于他們通常不具有訪問寫直立 JavaScript 時的額外的類型檢查和編譯器服務。

Rachel Appel 是開發商在微軟紐約城福音傳教士。到達她通過她的網址 rachelappel.com 或發送電子郵件 rachel.appel@microsoft.com。您也可以在 Twitter 上按照她最新的更新 twitter.com/rachelappel

由於以下的技術專家對本文的審閱:Christopher· Bennage (Microsoft)
克里斯多夫 · Bennage (Microsoft)

克里斯多夫 · Bennage 是開發商,在微軟的模式 & 實踐團隊。 他的工作是發現、 收集和鼓勵帶給開發者歡樂的做法。 他最近的技術利益之間在 JavaScript 和 (休閒) 遊戲開發。 在他博客 dev.bennage.com