Use TypeScript to write ASP. NET 5 applications on Mac OS

Use TypeScript to write an ASP. NET 5 app on Mac OS?

Tips

This article was updated: December 24, 2015.

On Mac OS, there is no time to edit the ASP. NET 5 IDE, only one Visual Studio code is available, in which case writing back-end code is laborious (for those accustomed to using the IDE), so this article is presented from the perspective of the front end.

This article will guide you through the process of creating a D3 data change curve.

What is TypeScript?

People who have written JavaScript know that JavaScript is just a scripting language and not suitable for writing large programs. (at least a few years ago, this is the way it is, and now there are a lot of extensions that JavaScript becomes more powerful.) ）

TypeScript is a superset of JavaScript, and any legitimate JavaScript code is also a legitimate TypeScript code.

The browser only supports JavaScript and does not support TypeScript, but TypeScript can be compiled on the server side as JavaScript, so it can be run on the browser.

Annotations

Angular 2.0 is based on the development of TypeScript.

What is D3?

D3 is one of the most popular visualization libraries and is used by many other tabular plugins. It allows you to bind arbitrary data to the DOM and then apply the data-driven transformation to the document. You can use it to create a basic HTML table with an array, or use its fluid excesses and interactions to create amazing SVG bar graphs with similar data.

Create an ASP. NET 5 app?

Use yo aspnet the Web application Basic app to create an ASP. NET 5.

Annotations

If you have not installed the. NET runtime environment on your Mac OS, or you do not create an empty ASP. 5 application, refer to creating and running an ASP. 5 Web site on Mac OS

Install TypeScript?

When you develop with Visual Studio 2015 under Windows, the compiler is installed by default and is compiled automatically when you save the TypeScript file, but it needs to be installed manually under Mac OS.

NPM install-g typescript

Add D3 Bower References & definitelytyped?

Open bower.json , add the following highlighted line.

{  "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"  }}

Run the bower install class library that downloads the installation d3js in the directory where the project is located.

As of now, we have installed the D3 Javascript class library, but if you want to use the advanced features of TypeScript, you must manually declare the types of objects in the D3 class library, this is a huge project, fortunately we have someone to help us, on Github has Https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/d3.

Download the d3.d.ts file and place it under the Wwwroot/ts-definitions folder.

Annotations

Can be placed in any subfolder of wwwroot, but is not recommended to be placed under the Wwwroot/lib/d3 folder because the run bower install will be deleted d3.d.ts .

Write D3 code?

Little Tricks

It is recommended that you use Visual Studio Code as a text editor that provides powerful IntelliSense.

Under the Wwwroot/js folder, create a new file svgshow.ts with the extension TS to indicate that this is a TypeScript file. Some of the contents are as follows, please go here for complete documents

///<reference path= ". /ts-definitions/d3/d3.d.ts "/>var margin = {top:20, right:120, bottom:30, left:50},    width = math.min (doc  Ument.body.clientWidth)-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));

The first line, // beginning with a comment for JavaScript, but for TypeScript, indicates the definition file for the referenced type.

Using the tsc wwwroot/js/svgshow.ts command to compile, the file will be generated in the same directory svgshow.js , some of the following:

///<reference path= ". /ts-definitions/d3/d3.d.ts "/>var margin = { Top:  -,  Right:  -, Bottom:  -,  Left:  - }, width = Math.min(Document.Body.clientwidth,  the) - margin. Left - margin. Right, Height =  - - margin.Top - margin.Bottom -  -;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 ); });    

You can see that the LAMBDA expression in Typecript is compiled as an anonymous function of JavaScript.

Annotations

If you have updated the. ts file, remember tsc to use it for compilation.

You can use .vsocde/tasks.json the file settings when Command+shift+b is pressed, and the compilation is called automatically tsc .

Modify page content?

Next, in order to see the effect of this code on the page, we modify the views/home/index.cshtml file to read:

@{    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>

Annotations

In order for the browser to read the script, you must refer to the JavaScript version instead of the TypeScript version.

View page?

Run command dnx web , open browser access: http://localhost:5000

Tips

Because JavaScript needs to load data, put this CSV file in the wwwroot directory.

Other resources?

AngularJs 2.0 (may need scientific internet access)

TypeScript

Typescript Chinese Course

Data-driven Documents (D3)

definitelytyped

Use TypeScript to write ASP. NET 5 applications on Mac OS