TypeScript：文档 - ASP.NET Core - TypeScript 编程语言

安装 ASP.NET Core 和 TypeScript

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

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

创建新项目

选择 文件 (File)
选择 新建项目 (New Project) (Ctrl + Shift + N)
在项目搜索栏中搜索 .NET Core
选择 ASP.NET Core Web 应用程序 (ASP.NET Core Web Application) 并点击 下一步 (Next) 按钮

Visual Studio Project Window Screenshot

为您的项目和解决方案命名。然后点击 创建 (Create) 按钮

Visual Studio New Project Window Screenshot

在最后一个窗口中，选择 空 (Empty) 模板并点击 创建 (Create) 按钮

Visual Studio Web Application Screenshot

运行应用程序，确保其正常工作。

A screenshot of Edge showing "Hello World" as success

设置服务器

打开 依赖项 (Dependencies) > 管理 NuGet 程序包 (Manage NuGet Packages) > 浏览 (Browse)。搜索并安装 Microsoft.AspNetCore.StaticFiles 和 Microsoft.TypeScript.MSBuild

The Visual Studio search for Nuget

打开您的 Startup.cs 文件，编辑 Configure 函数，使其看起来像这样

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

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

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

添加 TypeScript

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

The Path of "Add" then "New Folder" in Visual Studio from a Web Project

添加 TypeScript 代码

右键点击 scripts 并点击 新建项 (New Item)。然后选择 TypeScript 文件 (TypeScript File) 并将文件命名为 app.ts

A highlight of the new folder

添加示例代码

将以下代码添加到 app.ts 文件中。

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 并点击 新建项 (New Item)。然后选择 TypeScript 配置文件 (TypeScript Configuration File) 并使用默认名称 tsconfig.json

A screenshot showing the new file dialogue with TypeScript JSON Config selected

使用以下内容替换 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 包。右键点击项目并选择 新建项 (New Item)。然后选择 NPM 配置文件 (NPM Configuration File) 并使用默认名称 package.json。

Screenshot of VS showing new file dialog with 'npm configuration file' selected

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

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

保存文件后，Visual Studio 应开始安装 gulp 和 del。如果没有，右键点击 package.json 并选择“还原程序包 (Restore Packages)”。

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

Screenshot of VS showing npm folder

设置 gulp

右键点击项目并点击 新建项 (New Item)。然后选择 JavaScript 文件 (JavaScript File) 并使用名称 gulpfile.js

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 (done) {
    gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
    done();
});

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

现在右键点击 gulpfile.js 并点击“任务运行程序资源管理器 (Task Runner Explorer)”。

Screenshot of right clicking on the "Gulpfile.js" with 'Task Runner Explorer' selected

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

Screenshot of task explorer with "Gulpfile.js" in it

编写 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>

测试

运行项目
当您在框中输入内容时，应该会看到消息出现/改变！

A GIF of Edge showing the code you have just wrote

调试

在 Edge 中，按 F12 并点击“调试器 (Debugger)”选项卡。
查看第一个 localhost 文件夹，然后查看 scripts/app.ts
在 return 所在行设置断点。
在框中输入内容，确认断点已命中 TypeScript 代码，并且检查功能工作正常。

An image showing the debugger running the code you have just wrote

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