• ASP.NET Core
  • ASP.NET Core
    • 安装 ASP.NET Core 和 TypeScript
    • 新建工程
    • 设置服务项
  • 添加 TypeScript
    • 添加 TypeScript 代码
    • 添加示例代码
    • 构建设置
      • 配置 TypeScript 编译器
      • 配置 NPM
      • 设置 gulp
    • 编写HTML页
    • 测试
    • 调试
  • 添加 Angular 2
    • 使用 NPM 下载所需的包
    • 更新 tsconfig.json
    • 将 Angular 添加到 gulp 构建中
    • 用 TypeScript 写一个简单的 Angular 应用

    ASP.NET Core

    ASP.NET Core

    注意:Visual Studio 2017和最新版本的ASP.NET的更新即将推出!

    安装 ASP.NET Core 和 TypeScript

    首先,若有必要请安装 ASP.NET Core。 这个快速上手指南使用的是 Visual Studio ,若要使用 ASP.NET Core 你需要有 Visual Studio 2015。

    其次,如果你的 Visual Studio 中没有包含 TypeScript,你可以从这里安装TypeScript for Visual Studio 2015。

    新建工程

    • 选择 File

    • 选择 New Project (Ctrl + Shift + N)

    • 选择 Visual C#

    • 选择 ASP.NET Web Application

    Create new ASP.NET project

    • 选择 ASP.NET 5 Empty 工程模板

    取消复选 "Host in the cloud" 本指南将使用一个本地示例。 Use empty template

    运行此应用以确保它能正常工作。

    设置服务项

    project.json 文件的 "dependencies" 字段里添加:

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

    最终的 dependencies 部分应该类似于下面这样:

    1. "dependencies": {
    2. "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
    3. "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    4. "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
    5. },

    用以下内容替换 Startup.cs 文件里的 Configure 函数:

    1. public void Configure(IApplicationBuilder app)
    2. {
    3. app.UseIISPlatformHandler();
    4. app.UseDefaultFiles();
    5. app.UseStaticFiles();
    6. }

    添加 TypeScript

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

    Create new folder

    将文件夹命名为 scripts

    scripts folder

    添加 TypeScript 代码

    scripts上右击并选择New Item。 接着选择 TypeScript File(也可能 .NET Core 部分),并将此文件命名为app.ts

    New item

    添加示例代码

    将以下代码写入app.ts文件。

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

    构建设置

    配置 TypeScript 编译器

    我们先来告诉TypeScript怎样构建。 右击scripts文件夹并选择 New Item。 接着选择 TypeScript Configuration File,保持文件的默认名字为tsconfig.json

    Create tsconfig.json

    将默认的tsconfig.json内容改为如下所示:

    1. {
    2. "compilerOptions": {
    3. "noImplicitAny": true,
    4. "noEmitOnError": true,
    5. "sourceMap": true,
    6. "target": "es5"
    7. },
    8. "files": [
    9. "./app.ts"
    10. ],
    11. "compileOnSave": true
    12. }

    看起来和默认的设置差不多,但注意以下不同之处:

    • 设置"noImplicitAny": true
    • 显式列出了"files"而不是依据"excludes"
    • 设置"compileOnSave": true
      当你写新代码时,设置"noImplicitAny"选项是个不错的选择 — 这可以确保你不会错写任何新的类型。 设置 "compileOnSave"选项可以确保你在运行web程序前自动编译保存变更后的代码。

    配置 NPM

    现在,我们来配置NPM以使用我们能够下载JavaScript包。 在工程上右击并选择 New Item。 接着选择 NPM Configuration File,保持文件的默认名字为package.json。 在 "devDependencies"部分添加"gulp"和"del":

    1. "devDependencies": {
    2. "gulp": "3.9.0",
    3. "del": "2.2.0"
    4. }

    保存这个文件后,Visual Studio将开始安装gulp和del。 若没有自动开始,请右击package.json文件选择 Restore Packages

    设置 gulp

    最后,添加一个新JavaScript文件gulpfile.js。 键入以下内容:

    1. /// <binding AfterBuild='default' Clean='clean' />
    2. /*
    3. This file is the main entry point for defining Gulp tasks and using Gulp plugins.
    4. Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
    5. */
    6. var gulp = require('gulp');
    7. var del = require('del');
    8. var paths = {
    9. scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
    10. };
    11. gulp.task('clean', function () {
    12. return del(['wwwroot/scripts/**/*']);
    13. });
    14. gulp.task('default', function () {
    15. gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
    16. });

    第一行是告诉Visual Studio构建完成后,立即运行'default'任务。 当你应答 Visual Studio 清除构建内容后,它也将运行'clean'任务。

    现在,右击gulpfile.js并选择Task Runner Explorer。 若'default'和'clean'任务没有显示输出内容的话,请刷新explorer:

    Refresh Task Runner Explorer

    编写HTML页

    wwwroot中添加一个新建项 index.html。 在 index.html中写入以下代码:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <script src="scripts/app.js"></script>
    6. <title></title>
    7. </head>
    8. <body>
    9. <div id="message"></div>
    10. <div>
    11. Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
    12. Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
    13. </div>
    14. </body>
    15. </html>

    测试

    • 运行项目。
    • 在输入框中键入时,您应该看到一个消息:
      Picture of running demo

    调试

    • 在 Edge 浏览器中,按 F12 键并选择 Debugger 标签页。
    • 展开 localhost 列表,选择 scripts/app.ts
    • return 那一行上打一个断点。
    • 在输入框中键入一些内容,确认TypeScript代码命中断点,观察它是否能正确地工作。
      Demo paused on breakpoint

    这就是你需要知道的在ASP.NET中使用TypeScript的基本知识了。 接下来,我们引入Angular,写一个简单的Angular程序示例。

    添加 Angular 2

    使用 NPM 下载所需的包

    package.json 文件的 "dependencies" 添加 Angular 2 和 SystemJS:

    1. "dependencies": {
    2. "angular2": "2.0.0-beta.11",
    3. "systemjs": "0.19.24",
    4. },

    更新 tsconfig.json

    现在安装好了Angular 2及其依赖项,我们需要启用TypeScript中实验性的装饰器支持。 我们还需要添加ES2015的声明,因为Angular使用core-js来支持像 Promise的功能。 在未来,装饰器会成为默认设置,那时也就不再需要这些设置了。

    添加"experimentalDecorators": true, "emitDecoratorMetadata": true"compilerOptions"部分。 然后,再添加 "lib": ["es2015", "es5", "dom"]"compilerOptions",以引入ES2015的声明。 最后,我们需要添加 "./model.ts""files"里,我们接下来会创建它。 现在 tsconfig.json看起来如下:

    1. {
    2. "compilerOptions": {
    3. "noImplicitAny": true,
    4. "noEmitOnError": true,
    5. "sourceMap": true,
    6. "experimentalDecorators": true,
    7. "emitDecoratorMetadata": true,
    8. "target": "es5",
    9. "lib": [
    10. "es2015", "es5", "dom"
    11. ]
    12. },
    13. "files": [
    14. "./app.ts",
    15. "./model.ts",
    16. "./main.ts",
    17. ],
    18. "compileOnSave": true
    19. }

    将 Angular 添加到 gulp 构建中

    最后,我们需要确保 Angular 文件作为 build 的一部分复制进来。 我们需要添加:

    • 库文件目录。
    • 添加一个 lib 任务来输送文件到 wwwroot
    • default 任务上添加 lib 任务依赖。
      更新后的 gulpfile.js 像如下所示:
    1. /// <binding AfterBuild='default' Clean='clean' />
    2. /*
    3. This file is the main entry point for defining Gulp tasks and using Gulp plugins.
    4. Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
    5. */
    6. var gulp = require('gulp');
    7. var del = require('del');
    8. var paths = {
    9. scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
    10. libs: ['node_modules/angular2/bundles/angular2.js',
    11. 'node_modules/angular2/bundles/angular2-polyfills.js',
    12. 'node_modules/systemjs/dist/system.src.js',
    13. 'node_modules/rxjs/bundles/Rx.js']
    14. };
    15. gulp.task('lib', function () {
    16. gulp.src(paths.libs).pipe(gulp.dest('wwwroot/scripts/lib'))
    17. });
    18. gulp.task('clean', function () {
    19. return del(['wwwroot/scripts/**/*']);
    20. });
    21. gulp.task('default', ['lib'], function () {
    22. gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
    23. });

    此外,保存了此gulpfile后,要确保 Task Runner Explorer 能看到 lib 任务。

    用 TypeScript 写一个简单的 Angular 应用

    首先,将 app.ts 改成:

    1. import {Component} from "angular2/core"
    2. import {MyModel} from "./model"
    3. @Component({
    4. selector: `my-app`,
    5. template: `<div>Hello from {{getCompiler()}}</div>`
    6. })
    7. class MyApp {
    8. model = new MyModel();
    9. getCompiler() {
    10. return this.model.compiler;
    11. }
    12. }

    接着在 scripts 中添加 TypeScript 文件 model.ts:

    1. export class MyModel {
    2. compiler = "TypeScript";
    3. }

    再在 scripts 中添加 main.ts

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

    最后,将 index.html 改成:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <script src="scripts/lib/angular2-polyfills.js"></script>
    6. <script src="scripts/lib/system.src.js"></script>
    7. <script src="scripts/lib/rx.js"></script>
    8. <script src="scripts/lib/angular2.js"></script>
    9. <script>
    10. System.config({
    11. packages: {
    12. 'scripts': {
    13. format: 'cjs',
    14. defaultExtension: 'js'
    15. }
    16. }
    17. });
    18. System.import('scripts/main').then(null, console.error.bind(console));
    19. </script>
    20. <title></title>
    21. </head>
    22. <body>
    23. <my-app>Loading...</my-app>
    24. </body>
    25. </html>

    这里加载了此应用。 运行 ASP.NET 应用,你应该能看到一个 div 显示 "Loading…" 紧接着更新成显示 "Hello from TypeScript"。