在 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 版。