在 Mac OS 上使用 TypeScript 编写 ASP.NET Core 1.0 应用

2022-02-01 13:25:08

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