ASP.NET Core

安装ASP.NET Core和TypeScript

首先，如果需要，安装ASP.NET Core。本快速入门指南需要Visual Studio 2015或2017。

接下来，如果你的Visual Studio版本还没有最新的TypeScript，你可以安装。

创建一个新项目

选择文件

2. 选择新建项目（Ctrl + Shift + N）

3. 选择Visual C＃

4. 对于VS2015，选择ASP.NET Web应用程序 > ASP.NET 5 Empty，并且让我们取消选中“云中的主机”，因为我们要在本地运行它。

对于VS2017，请选择ASP.NET核心Web应用程序（.NET Core） > ASP.NET Core 1.1 Empty。

运行该应用程序并确保它能正常工作。

设置服务器

VS2015

在另外project.json添加一个条目"dependencies"：

"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"

由此产生的依赖关系应该如下所示：

  "dependencies": {
  "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
  "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
  "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
  },

更换的机身Configure在Startup.cs与

public void Configure(IApplicationBuilder app)
{
  app.UseIISPlatformHandler();
  app.UseDefaultFiles();
  app.UseStaticFiles();
}

VS2017

打开依赖项 > 管理NuGet包 > 浏览。搜索并安装Microsoft.AspNetCore.StaticFiles1.1.2：

更换的机身Configure在Startup.cs与

public void Configure(IApplicationBuilder app)
{
  app.UseDefaultFiles();
  app.UseStaticFiles();
}

您可能需要重新启动VS才能看到下面的红色波浪线UseDefaultFiles并UseStaticFiles消失。

添加TypeScript

下一步是为TypeScript添加一个文件夹。

我们只是叫它scripts。

添加TypeScript代码

右键单击scripts并单击新建项目。然后选择TypeScript文件（可能位于.NET Core部分）并命名该文件app.ts。

添加示例代码

在app.ts中输入以下代码

function sayHello() {
  const compiler = (document.getElementById("compiler") as HTMLInputElement).value;
  const framework = (document.getElementById("framework") as HTMLInputElement).value;
  return `Hello from ${compiler} and ${framework}!`;
}

设置构建

配置TypeScript编译器

首先，我们需要告诉TypeScript如何构建。右键单击脚本文件夹并单击新建项目。然后选择TypeScript配置文件并使用默认名称tsconfig.json。

将默认值替换tsconfig.json为以下内容：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "./app.ts"
  ],
  "compileOnSave": true
}

这与默认类似，但有以下区别：

它设置"noImplicitAny": true。

2. 它明确列出"files"而不是依赖"excludes"。

3. 它设置"compileOnSave": true。

"noImplicitAny"每当你编写新的代码时，这是个好主意 - 你可以确保你不会错误地编写任何无类型的代码。"compileOnSave"可以轻松更新正在运行的Web应用程序中的代码。

设置NPM

现在我们需要设置NPM，以便我们可以下载JavaScript包。右键单击该项目并单击新建项目。然后选择NPM配置文件并使用默认名称package.json。里面"devDependencies"加入“gulp”和“del”：

"devDependencies": {
  "gulp": "3.9.0",
  "del": "2.2.0"
}

保存文件后，Visual Studio应该立即开始安装gulp和del。如果不是，请右键单击package.json，然后单击还原包。

设置gulp

最后，添加一个名为的新JavaScript文件gulpfile.js。把下面的代码放在里面：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
  scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
};

gulp.task('clean', function () {
  return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', function () {
  gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
});

第一行告诉Visual Studio在构建完成后运行“default”任务。当您要求Visual Studio清理构建时，它也会运行“clean”任务。

现在右键单击gulpfile.js并单击Task Runner Explorer。如果'默认'和'干净'任务没有显示出来，刷新浏览器：

编写一个HTML页面

添加一个名为index.htmlinside 的新项目wwwroot。使用以下代码index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="scripts/app.js"></script>
  <title></title>
</head>
<body>
  <div id="message"></div>
  <div>
    Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
    Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
  </div>
</body>
</html>

测试

运行该项目。

2. 在输入框中输入时应该会看到一条消息：

调试

在Edge中，按F12并单击调试器选项卡。

2. 查看第一个localhost文件夹，然后查看scripts/app.ts

3. 把一个断点放在线上return。

4. 在框中输入并确认断点在TypeScript代码中命中，并且检查工作正常。

这就是你需要知道的在ASP.NET项目中包含基本的TypeScript。接下来，我们将包含Angular并编写一个简单的Angular应用程序。

添加Angular 2

添加NPM依赖关系

将Angular 2和SystemJS添加到dependencies中package.json。

对于VS2015，新dependencies名单：

  "dependencies": {
  "angular2": "2.0.0-beta.11",
  "systemjs": "0.19.24",
  "gulp": "3.9.0",
  "del": "2.2.0"
  },

对于VS2017，由于NPM3中对等关系的贬低，我们需要将Angular 2的对等关系直接列为依赖关系：

  "dependencies": {
  "angular2": "2.0.0-beta.11",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "^0.6.4",
  "systemjs": "0.19.24",
  "gulp": "3.9.0",
  "del": "2.2.0"
  },

Update tsconfig.json

现在已经安装了Angular 2及其依赖项，我们需要启用TypeScript对装饰器的实验支持。我们还需要为ES2015添加声明，因为Angular使用core-j来处理类似事情Promise。将来，装饰器将成为默认设置，这些设置将不再需要。

添加"experimentalDecorators": true, "emitDecoratorMetadata": true到该"compilerOptions"部分。接下来，添加"lib": ["es2015", "es5", "dom"]到"compilerOptions"以及从ES2015带来的声明。最后，我们需要"files"为另一个文件添加一个新条目"./model.ts"，我们将创建它。我们的tsconfig应该如下所示：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": [
      "es2015", "es5", "dom"
    ]
  },
  "files": [
    "./app.ts",
    "./model.ts",
    "./main.ts"
  ],
  "compileOnSave": true
}

添加Angular到gulp版本

最后，我们需要确保将Angular文件作为构建的一部分进行复制。我们需要补充：

库文件的路径。

2. 添加一个lib任务来管理文件wwwroot。

3. lib向default任务添加依赖关系。

更新gulpfile.js应该如下所示：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
  scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
  libs: ['node_modules/angular2/bundles/angular2.js',
       'node_modules/angular2/bundles/angular2-polyfills.js',
       'node_modules/systemjs/dist/system.src.js',
       'node_modules/rxjs/bundles/Rx.js']
};

gulp.task('lib', function () {
  gulp.src(paths.libs).pipe(gulp.dest('wwwroot/scripts/lib'));
});

gulp.task('clean', function () {
  return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', ['lib'], function () {
  gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'));
});

再次确保Task Runner Explorer lib在保存gulp文件后看到新的任务。

在TypeScript中编写一个简单的Angular应用程序

首先，将代码更改app.ts为：

import {Component} from "angular2/core"
import {MyModel} from "./model"

@Component({
  selector: `my-app`,
  template: `<div>Hello from {{getCompiler()}}</div>`
})
export class MyApp {
  model = new MyModel();
  getCompiler() {
    return this.model.compiler;
  }
}

然后在scriptsnamed中添加另一个TypeScript文件model.ts：

export class MyModel {
  compiler = "TypeScript";
}

然后scripts命名中的另一个TypeScript文件main.ts：

import {bootstrap} from "angular2/platform/browser";
import {MyApp} from "./app";
bootstrap(MyApp);

最后，将代码更改index.html为以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="scripts/lib/angular2-polyfills.js"></script>
  <script src="scripts/lib/system.src.js"></script>
  <script src="scripts/lib/rx.js"></script>
  <script src="scripts/lib/angular2.js"></script>
  <script>
  System.config({
    packages: {
      'scripts': {
        format: 'cjs',
        defaultExtension: 'js'
      }
    }
  });
  System.import('scripts/main').then(null, console.error.bind(console));
  </script>
  <title></title>
</head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>

这加载应用程序。当您运行ASP.NET应用程序时，您应该会看到一个表示“加载...”的div，然后更新为“来自TypeScript的Hello”。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18