ASP.NET Core

安装 ASP.NET Core 和 TypeScript

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

接下来，如果你的 Visual Studio 版本尚未包含最新的 TypeScript，你可以安装它。

创建新项目

1. 选择 文件
2. 选择 新建项目 (Ctrl + Shift + N)
3. 在项目搜索栏中搜索 .NET Core
4. 选择 ASP.NET Core Web 应用程序，然后按 下一步 按钮

5. 命名你的项目和解决方案。之后选择 创建 按钮

6. 在最后一个窗口中，选择 空 模板，然后按 创建 按钮

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

设置服务器

打开 依赖项 > 管理 NuGet 程序包 > 浏览。搜索并安装 Microsoft.AspNetCore.StaticFiles 和 Microsoft.TypeScript.MSBuild：

打开你的 Startup.cs 文件，并将你的 Configure 函数编辑为如下所示：

public void Configure(IApplicationBuilder app, IHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();
}

你可能需要重启 VS，以便 UseDefaultFiles 和 UseStaticFiles 下方的红色波浪线消失。

添加 TypeScript

接下来我们将添加一个新文件夹，并命名为 scripts。

添加 TypeScript 代码

右键单击 scripts，然后单击 新建项。然后选择 TypeScript 文件，并将文件命名为 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 如何构建。右键单击 scripts，然后单击 新建项。然后选择 TypeScript 配置文件，并使用默认名称 tsconfig.json

将 tsconfig.json 文件的内容替换为：

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

• noEmitOnError : 如果报告了任何错误，则不输出。
• noImplicitAny : 在具有隐式 any 类型的表达式和声明上引发错误。
• sourceMap : 生成相应的 .map 文件。
• target : 指定 ECMAScript 目标版本。

注意："ESNext" 针对最新的受支持版本。

当你编写新代码时，noImplicitAny 是一个好主意——你可以确保不会错误地编写任何未类型化的代码。"compileOnSave" 使得在运行的 Web 应用程序中更新代码变得容易。

设置 NPM

我们需要设置 NPM，以便可以下载 JavaScript 包。右键单击项目，然后选择 新建项。然后选择 NPM 配置文件，并使用默认名称 package.json。

在 package.json 文件的 "devDependencies" 部分中，添加 gulp 和 del

"devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0"
}

一旦你保存文件，Visual Studio 应该会开始安装 gulp 和 del。如果没有，请右键单击 package.json，然后选择还原包。

之后，你应该会在解决方案资源管理器中看到一个 npm 文件夹

设置 gulp

右键单击项目，然后单击 新建项。然后选择 JavaScript 文件，并使用名称 gulpfile.js

/// <binding AfterBuild='default' Clean='clean' />
/*
此文件是定义 Gulp 任务和使用 Gulp 插件的主入口点。
单击此处了解更多信息。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 (done) {
    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
    done();
});

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

现在，右键单击 gulpfile.js，然后单击任务运行程序资源管理器。

如果没有显示 'default' 和 'clean' 任务，请刷新资源管理器：

编写 HTML 页面

右键单击 wwwroot 文件夹（如果你没有看到该文件夹，请尝试构建项目），并在其中添加一个名为 index.html 的新项。对 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>

测试

1. 运行项目
2. 当你在框中输入时，你应该会看到消息出现/变化！

调试

1. 在 Edge 中，按 F12 并单击调试程序选项卡。
2. 查看第一个 localhost 文件夹，然后查看 scripts/app.ts
3. 在带有 return 的行上设置断点。
4. 在框中输入，并确认断点命中了 TypeScript 代码，并且检查工作正常。

恭喜，你已经构建了一个带有 TypeScript 前端的自己的 .NET Core 项目。