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 и нажмите кнопку Далее

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" упрощает обновление кода в работающем веб-приложении.

Настройка NPM

Нам нужно настроить NPM для загрузки пакетов JavaScript. Щелкните правой кнопкой мыши по проекту и выберите Новый элемент. Затем выберите Файл конфигурации NPM и используйте имя по умолчанию package.json.

В разделе "devDependencies" файла package.json добавьте 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' />
/*
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» после завершения сборки. Она также выполнит задачу «clean», когда вы попросите Visual Studio очистить сборку.

Теперь щелкните правой кнопкой мыши по gulpfile.js и выберите Task Runner Explorer.

Если задачи «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 и что инспекция работает корректно.

Поздравляем! Вы создали собственный проект .NET Core с фронтендом на TypeScript.