神刀安全网

Configuring Typescript for ASP.NET CORE Apps

Start with an empty project

Open up Visual Studio 2015 and create a new ASP.NET Core Web Application . Make sure you have ASP.NET CORE RC2 installed in your PC if you want to follow this walkthrough step by step.

Configuring Typescript for ASP.NET CORE Apps

Choose the Empty Template from the available ASP.NET Core Templates since we are totally starting from scratch.

Configuring Typescript for ASP.NET CORE Apps

After your project is created, it should restore required NuGet packages defined in the project.json file. The empty project solution will look like this,

Configuring Typescript for ASP.NET CORE Apps

Adding a default html file

To serve a default html file when the application is launched, we need a .net core package ( "Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final" ) and the html file itself under the wwwroot folder.

Update the dependencies of project.json file with the following highlighted line of code.

Configuring Typescript for ASP.NET CORE Apps

Notice that this library will only serve a default html file with the following name formats

index.html index.htm default.html default.html

For this article we chose index.html

Configuring Typescript for ASP.NET CORE Apps

Now to actually serve this html page as a startup page, write the following two lines code in the Configure(IApplicationBuilder app) method which is in the Startup.cs file.

Configuring Typescript for ASP.NET CORE Apps

Running the app will now serve the index.html page as a startup page.

Installing NPM and Bower

NPM is used here to install BOWER itself and other node packages to help transpiling typescript files into raw javascript files. BOWER is used to resolve client side packages. Add a npm Configuration File in the project,

Configuring Typescript for ASP.NET CORE Apps

Update the devDependencies node with the following packages and save the file.

Configuring Typescript for ASP.NET CORE Apps

Again add a Bower Configuration File and update the dependencies node with the following package

Configuring Typescript for ASP.NET CORE Apps

Although installing Angular is not mandatory but the article demonstrate writing Angular code using typescript.

Adding a Typescript Configuration File

Add a typescript JSON Configuration File .

Configuring Typescript for ASP.NET CORE Apps

The file consists of the following configurations,

Configuring Typescript for ASP.NET CORE Apps

This is the file where you can configure typescript according to your project structure by playing around with different configurations (for example: change the target property value from es5 to es3 to let your typescript transpiler know that you want your transpiled typescript file to follow ECMAScript 3 specifications)

Installing Typescript Definition File

For raw javascript, typescript has a definition file called lib.d.ts . To be able to use definition files for other open source libraries we need to install them using a package manager called tsd . You can avoid installing definition file but in that case you won’t get any intellisense.

Open up a command prompt and install the package manager globally ( tsd ) using NPM. Run the following command in the command prompt,

npm install -g tsd

Configuring Typescript for ASP.NET CORE Apps

Now install the type definition file for Angular . Run the following command in the command prompt,

Configuring Typescript for ASP.NET CORE Apps

tsd install angular –save --resolve

Note that Angular ’s type definition file has a dependency on JQuery ’s type definition file. So both are installed even though we’ve command just for Angular . After installing, you project structure will have a new tsd.json file and a folder called typings where the actual type definition files can be found.

Configuring Typescript for ASP.NET CORE Apps

Adding Gulp Task for transpiling typescript into javascript

Add a gulp Configuration File in you project and remove the existing code from it.

Configuring Typescript for ASP.NET CORE Apps

Note that we have already installed all the node packages we need to transpile typescript to javascript with a gulp task. The following code transpile all the typescript file available in the client folder and merge them into a single file named site.min.js . site.min.js is located in the wwwroot under the js folder

 'use strict';  var gulp = require('gulp'),     tsc = require('gulp-typescript'),     sourcemaps = require('gulp-sourcemaps'),     rimraf = require("rimraf"),     concat = require("gulp-concat"),     merge = require('merge2'),     uglify = require("gulp-uglify"),     tsProject = tsc.createProject('tsconfig.json');  var paths = {     webroot: "./wwwroot/",     clientroot: "./client/" };  paths.tsOutputPath = paths.webroot + '/js'; paths.js = paths.webroot + "js/**/*.js"; paths.minJs = paths.webroot + "js/**/*.min.js"; paths.concatJsDest = paths.webroot + "js/site.min.js"; paths.allTypeScript = paths.clientroot + '/**/*.ts'; paths.typings = './typings/'; paths.libraryTypeScriptDefinitions = './typings/**/*.ts';  gulp.task('compile:ts', function () {     var sourceTsFiles = [paths.allTypeScript,                //path to typescript files                          paths.libraryTypeScriptDefinitions]; //reference to library .d.ts files       var tsResult = gulp.src(sourceTsFiles)                        .pipe(sourcemaps.init())                        .pipe(tsc(tsProject));       return merge([ // Merge the two output streams, so this task is finished when the IO of both operations are done.         tsResult.dts.pipe(gulp.dest(paths.tsOutputPath )),         tsResult.js.pipe(sourcemaps.write('.')).pipe(gulp.dest(paths.tsOutputPath))     ]); });  gulp.task("clean:js", function (cb) {     rimraf(paths.concatJsDest, cb); });   gulp.task("min:js", function () {     return gulp.src([paths.js, "!" + paths.minJs], { base: "." })         .pipe(concat(paths.concatJsDest))         .pipe(uglify())         .pipe(gulp.dest(".")); }); 

As you can see, there are three tasks defined in the gulpfile.js. compile:js transpile typescript files into javascript files. min:js file merges all the javascript files into a single file called site.min.js . clean:js task removes existing site.min.js from the wwwroot/js folder.

Start writing typescript

For demo purpose, create two .ts files under the client folder named app.ts and controller.ts . The code is not important here (you can download the full solution from the github link provided at the bottom of the post), the only important thing is whether we have typescript intellisense in those files.

Configuring Typescript for ASP.NET CORE Apps

As you can see, we have intellisense when we start writing angular and raw javascript code. To transpile the typescript files, run the task named “compile:ts”. You will have a result like below if you run all the tasks in order

Configuring Typescript for ASP.NET CORE Apps

Now if you update the html with the required library and run the project (see the updated html file with angular binding from the source code provided). The browser will show this message below,

Configuring Typescript for ASP.NET CORE Apps

Download Source Code

Github Repository Link – https://github.com/fiyazbinhasan/Typescript-ASP.NET-CORE

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Configuring Typescript for ASP.NET CORE Apps

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址