ASP.NET Core
安装 ASP.NET Core 和 TypeScript
首先，如果需要的话，请安装 ASP.NET Core。本快速入门指南需要 Visual Studio 2015 或 2017。
接下来，如果你的 Visual Studio 版本尚未包含最新的 TypeScript，你可以安装它。
创建新项目
- 选择 文件
- 选择 新建项目 (Ctrl + Shift + N)
- 在项目搜索栏中搜索 .NET Core
- 选择 ASP.NET Core Web 应用程序，然后按 下一步 按钮
- 命名你的项目和解决方案。之后选择 创建 按钮
- 在最后一个窗口中，选择 空 模板，然后按 创建 按钮
运行应用程序并确保它能正常工作。
设置服务器
打开 依赖项 > 管理 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>测试
- 运行项目
- 当你在框中输入时，你应该会看到消息出现/变化！
调试
- 在 Edge 中，按 F12 并单击调试程序选项卡。
- 查看第一个 localhost 文件夹，然后查看 scripts/app.ts
- 在带有 return 的行上设置断点。
- 在框中输入，并确认断点命中了 TypeScript 代码，并且检查工作正常。
恭喜，你已经构建了一个带有 TypeScript 前端的自己的 .NET Core 项目。