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

查看页面

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

提示

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

声明

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

在 Mac OS 上使用 TypeScript 编写 ASP.NET Core 1.0 应用的更多相关文章

  1. 在 Mac OS 上创建并运行 ASP.NET Core 1.0 网站

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  2. 从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码

    前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...

  3. 从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  4. 从头编写 asp.net core 2.0 web api 基础框架 (2)

    上一篇是: http://www.cnblogs.com/cgzl/p/7637250.html Github源码地址是: https://github.com/solenovex/Building- ...

  5. 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置

    第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部分 ...

  6. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置

    Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...

  7. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (2)

    Github源码地址是: https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scra ...

  8. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  9. 从头编写 asp.net core 2.0 web api 基础框架 (3)

    第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...

随机推荐

  1. 获取图片工具类:BitmapUtil

    package com.example.administrator.filemanager.utils;import android.content.Context;import android.gr ...

  2. Cannot find or open the PDB file问题的解决

    'testcv.exe' (Win32): Loaded 'D:\Documents\Visual Studio 2013\Projects\testcv\x64\Debug\testcv.exe'. ...

  3. eclipse导出jar包的方法

    第一:导出基本项目的jar包(此项目没有引用过第三方jar包) 1.在eclipse中选择你要导出的项目或package或类,右击,选择Export子选项: 2.在弹出的对话框中,选择java文件-- ...

  4. C语言fgetpos()函数:获得当前文件的读写指针(转)

    头文件:#include<stdio.h>fgetpos()函数获得当前文件的指针所指的位置,并把该指针所指的位置信息存放到pos所指的对象中.pos以内部格式存储,仅由fgetpos() ...

  5. linux 软件的安装与Tarball

    Linux 系统上真正认识的可执行文件其实是二进制文件 ( binary program ) shell scripts 只是利用 shell (例如 bash) 这支程序的功能进行一些判断式,而最终 ...

  6. [转载]Matlab之静态文本多行输出

    转载文章,原文链接:Matlab中的静态文本框中显示多行内容 有时候,我们在GUI中利用静态文本框显示程序的结果,但是结果很长,一行未必可以显示的开,而静态文本框不像edit或listbox那样通过滚 ...

  7. 遇到IIS7配置PHP出现403和404错误的解决办法

    服务器要配置PHP,总是出现403错误.服务器是新装的,操作系统是windows server 2008 R2,装的IIS7. IIS里PHP和本地服务器对比了好几遍,都没到出错的原因,后来通过cmd ...

  8. getElementByName()和getElementById的区别

    因为在属性中,id时唯一的,getElementById取出的是一个元素但是可以出现相同的name,取到的是一个Array ,getElementsByName取出的是数组 记录代码如下: <! ...

  9. Java Struts2 POI创建Excel文件并实现文件下载

    Java Struts2 POI创建Excel文件并实现文件下载2013-09-04 18:53 6059人阅读 评论(1) 收藏 举报 分类: Java EE(49) Struts(6) 版权声明: ...

  10. ceph实践: 搭建环境

    作者:吴香伟 发表于 2014/09/26 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 本节主要参考官网的ADDING/REMOVING OSDS章节. 同步 ...