在 Mac OS 上使用 TypeScript 編寫 ASP.NET Core 1.0 應用¶

警告

您當前查看的頁面是未經授權的轉載！
如果當前版本排版錯誤，請前往查看最新版本：http://www.cnblogs.com/qin-nz/p/aspnet5-using-typescript-on-mac-os.html

提示

更新時間：2016年01月20日。

在 Mac OS 上，並沒有時候編輯 ASP.NET Core 1.0 的 IDE，只有一個 Visual Studio Code 可用，這種情況下，編寫后端代碼是比較費勁的（對於習慣使用IDE的人來說），所以本文從前端的角度來介紹下。

本文將引導你創建一個 d3 數據變化曲線的展現過程。

什么是 TypeScript¶

寫過 JavaScript 的人都知道， JavaScript 只是一個腳本語言，並不適合寫大型程序。（至少幾年前是這個樣子的，現在會有很多的擴展來是 JavaScript 變得更強大。）

TypeScript 是 JavaScript 的超集，任何合法的 JavaScript 代碼也是合法的 TypeScript 代碼。

瀏覽器只支持 JavaScript ，不支持 TypeScript ；但是， TypeScript 可以在服務器端編譯為 JavaScript ，因此可以在瀏覽器上運行。

注解

Angular 2.0 就是基於 TypeScript 開發的。

Angular 2.0 Beta 已於聖誕節前發布。

什么是 d3¶

D3 是最流行的可視化庫之一，它被很多其他的表格插件所使用。它允許綁定任意數據到DOM，然后將數據驅動轉換應用到Document中。你可以使用它用一個數組創建基本的HTML表格，或是利用它的流體過度和交互，用相似的數據創建驚人的SVG條形圖。

創建一個 ASP.NET Core 1.0 應用¶

使用 yo aspnet 創建一個 ASP.NET Core 1.0 的 Web Application Basic 應用。

注解

如果你還沒有在你的 Mac OS 上安裝過 .NET 運行環境，或者不會創建一個空的 ASP.NET Core 1.0 應用，請參考在 Mac OS 上創建並運行 ASP.NET Core 1.0 網站

安裝 TypeScript¶

在 Windows 下使用 Visual Studio 2015 開發的時候，默認已經安裝了編譯器，並且在保存 TypeScript 文件時會自動編譯，但在 Mac OS 下，需要手動安裝。

npm install -g typescript

添加 d3 的 bower 引用 & DefinitelyTyped¶

打開 bower.json，添加如下的高亮行。

 
             {
  "name": "sample",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.5",
    "d3": "3.5.8",
    "jquery": "2.1.4",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.4"
  }
}
 
            

在項目所在目錄運行 bower install 下載安裝 d3js 的類庫。

截至目前，我們已經安裝好了d3的 Javascript 類庫，但是如果下想要使用 TypeScript 的高級功能，必須對 d3 類庫中的各種對象手動的聲明類型，這是一個浩大的工程，好在已經有人幫我們搞定了，在 Github 上有 https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/d3 。

下載 d3.d.ts 文件，放在 wwwroot/ts-definitions 文件夾下。

注解

可以放在 wwwroot 的任何子文件夾內，但不建議放到 wwwroot/lib/d3 文件夾下，因為運行 bower install 會刪除 d3.d.ts 。

編寫 d3 代碼¶

小技巧

建議使用 Visual Studio Code 作為文本編輯器，會提供強大的智能感知。

在 wwwroot/js 文件夾下，新建文件 svgshow.ts ，擴展名為ts表示這是一個 TypeScript 文件。部分內容如下，完整文件請前往這里

 
             ///<reference path="../ts-definitions/d3/d3.d.ts" />
var margin = { top: 20, right: 120, bottom: 30, left: 50 },
    width = Math.min(document.body.clientWidth, 1080) - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom - 20;

var xLinear = d3.scale.linear()
    .range([0, width]);

var yLinear = d3.scale.linear()
    .range([height, 0]);

var line = d3.svg.line()
    .interpolate("basis")
    .x((d: any) => xLinear(d.x))
    .y((d: any) => yLinear(d.y));
 
            

第一行，以 // 開頭，對於 JavaScript 來說是注釋，但對於 TypeScript 來說，指明了引用的類型的定義文件。

使用 tsc wwwroot/js/svgshow.ts 命令進行編譯，會在相同目錄下生成 svgshow.js 文件，部分內容如下：

 
             ///<reference path="../ts-definitions/d3/d3.d.ts" />
var margin = { top: 20, right: 120, bottom: 30, left: 50 }, width = Math.min(document.body.clientWidth, 1080) - margin.left - margin.right, height = 800 - margin.top - margin.bottom - 20;
var xLinear = d3.scale.linear()
    .range([0, width]);
var yLinear = d3.scale.linear()
    .range([height, 0]);
var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) { return xLinear(d.x); })
    .y(function (d) { return yLinear(d.y); });
 
            

可以看到 Typecript 中的 Lambda 表達式被編譯為 JavaScript 的匿名函數了。

注解

如果你更新了 .ts 文件，記得使用 tsc 進行編譯。

你可以使用 .vsocde/tasks.json 文件設置當按下 Command+Shift+B 后，自動調用 tsc 編譯。

修改頁面內容¶

接下來，為了能在頁面中看到這段代碼的效果，我們修改 Views/Home/Index.cshtml 文件為以下內容：

 
             @{
    ViewData["Title"] = "Home Page";
}
@section scripts{
    <style>
        body {
            font: 10px sans-serif;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .x.axis path {
            display: none;
        }
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 1.5px;
        }
    </style>
    <script src="~/lib/d3/d3.js"></script>
    <script src="~/js/svgshow.js"></script>
}
<div id="svgdiv"></div>
 
            

注解

為了讓瀏覽器能看懂腳本，必須引用 JavaScript 版而不是 TypeScript 版。