TypeScript：文档 - 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 应用程序 并按下 下一步 按钮

Visual Studio Project Window Screenshot

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

Visual Studio New Project Window Screenshot

在最后一个窗口中，选择空模板并按下创建按钮

Visual Studio Web Application Screenshot

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

A screenshot of Edge showing "Hello World" as success

设置服务器

打开 依赖项 > 管理 NuGet 包 > 浏览。 搜索并安装 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 并单击 **新建项**。然后选择 **TypeScript 文件** 并将文件命名为 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 并单击 **新建项**。然后选择 **TypeScript 配置文件** 并使用默认名称 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 包。右键单击项目并选择新建项。然后选择NPM 配置文件并使用默认名称 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，然后选择还原包。

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

Screenshot of VS showing npm folder

设置 gulp

右键单击项目并单击新建项。然后选择JavaScript 文件并使用名称 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 并单击任务运行程序资源管理器。

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

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

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 并单击调试器选项卡。
查看第一个 localhost 文件夹，然后是 scripts/app.ts
在带有 return 的行上设置断点。
在框中输入并确认断点在 TypeScript 代码中命中，并且检查工作正常。

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

恭喜您使用 TypeScript 前端构建了自己的 .NET Core 项目。

ASP.NET Core

安装 ASP.NET Core 和 TypeScript

创建一个新项目

设置服务器

添加 TypeScript

添加 TypeScript 代码

添加示例代码

设置构建

设置 NPM

设置 gulp

编写 HTML 页面

测试

调试

JavaScript 基础

JavaScript 中的函数

使用类

现代 JavaScript

外部 API

帮助使用 JavaScript

基本类型

类型基本类型

元类型

语言

语言扩展