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


    在 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- 1.5px;
            }
        </style>
        <script src="~/lib/d3/d3.js"></script>
        <script src="~/js/svgshow.js"></script>
    }
    <div id="svgdiv"></div>
    

    注解

    为了让浏览器能看懂脚本,必须引用 JavaScript 版而不是 TypeScript 版。

    查看页面

    运行命令 dnx web , 打开浏览器访问: http://localhost:5000

    https://qinblog.blob.core.windows.net/images/aspnet5-using-typescript-on-mac-os-result.png

    提示

    由于JavaScript 需要加载数据,请把 这个csv文件 放到 wwwroot 目录中。

    声明 知识共享许可协议

    在 Mac OS 上使用 TypeScript 编写 ASP.NET Core 1.0 应用勤奋的小孩 创作,采用 知识共享 署名-相同方式共享 4.0 国际 许可协议进行许可。
    本许可协议授权之外的使用权限可以从 http://space.cnblogs.com/msg/send/qin-nz 处获得。

  • 相关阅读:
    VC++MFC对话框程序中给对话添加背景图片
    C++中的引用
    64位Ubuntu 13.04 安装Bochs 2.3.5
    笔记
    ORG 07C00H的意思
    编译三思
    《黑客与画家》笔记
    linux 2.6up的设备和设备驱动模型
    linux嵌入式系统驱动程序的阻塞与异步
    【转】PWM占空比和分辨率
  • 原文地址:https://www.cnblogs.com/qin-nz/p/aspnet5-using-typescript-on-mac-os.html
Copyright © 2020-2023  润新知