Практическое использование TypeScript

TypeScript в ASP.NET MVC 5

Создадим стандартный проект ASP.NET MVC 5. После создания добавим в проект в папку Scripts новый элемент - файл кода TypeScript:

Назовем файл app.ts. При добавлении файла отобразится окно о том, что проект сконфигурирован для использования TypeScript, и будет предложено добавить NuGet-пакеты.

И если необходимо добавить какие-нибудь связанные с TS NuGet-пакеты, то мы можем нажать на кнопку ОК. Например, если мы собираемся использовать в коде TypeScript функциональность, определенную в jquery, то мы можем добавить соответствующий пакет:

Добавим в проект модель, с которой будем работать:

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

В контроллере будем отдавать список объектов этой модели клиенту:

public class HomeController : Controller
{
	public ActionResult Index()
    {
        return View();
    }
	
    public JsonResult GetUsers()
    {
        List<User> users = new List<User> 
        { 
            new User {Id=1, Name="Tom", Age=23},
            new User {Id=2, Name="Alice", Age=28},
            new User {Id=3, Name="Bill", Age=32}
        };
        return Json(users, JsonRequestBehavior.AllowGet);
    }
}

Представление Index.cshtml будет выглядеть следующим образом:

@{
    ViewBag.Title = "Home Page";
}

<div id="content"></div>
<button class="btn" id="loadBtn">Загрузить</button><button class="btn" id="displayBtn">Показать</button>
@section scripts{
	<script src='@Url.Content("~/Scripts/app.js")'></script>
}

В представлении определены две кнопки: одна для загрузки данных, другая для их отображения.

Поскольку мы добавили в проект файл TypeScript, который называется app.ts, то соответственно здесь нам надо подключить файл app.js. При этом предполагается, что представление использует мастер-страницу, на которой подключается библиотека jquery перед определением секции scripts.

Теперь изменим пока еще пустой файл app.ts:

/// <reference path="typings/jquery/jquery.d.ts" />
class UserList {

    private users: Array<User> = new Array<User>();

    load() : void {

        $.getJSON('http://localhost:21204/Home/GetUsers',
            (data) => {
                this.users = data;
                alert('данные загружены');
                
            });
    }

    displayUsers(): void {

        var table = '<table class="table">'
        for (var i = 0; i < this.users.length; i++) {

            var tableRow = '<tr>' +
                '<td>' + this.users[i].Id + '</td>' +
                '<td>' + this.users[i].Name + '</td>' +
                '<td>' + this.users[i].Age + '</td>' +
                '</tr>';
            table += tableRow;
        }
        table += '</table>';
        $('#content').html(table);
    }
}

class User {

    Id: number;
    Name: string;
    Age: number;
}

window.onload = () => {
    var userList: UserList = new UserList();
    $("#loadBtn").click(() => { userList.load();});
    $("#displayBtn").click(() => { userList.displayUsers(); });
};

Первая строка:

/// <reference path="typings/jquery/jquery.d.ts" />

добавляет заголовочный файл jquery.d.ts, который содержит определения классов и интерфейсов для работы с jquery.

Для определения объекта пользователя создается класс User, который аналогичен классу User на стороне бекэнда.

Всю основную работу выполняет класс UserList. Он определяет массив пользователей, а также две функции: для загрузки данных с сервера с помощью ajax и для отображения загруженных данных в виде таблицы. При загрузке данных используется функция jquery $.getJSON(), в которую передаем адрес и лямбда-выражение для обработки загружаемых данных. При этом применяется полный адрес к ресурсу http://localhost:21204/Home/GetUsers, соответственно, вам надо изменить на свой адрес, по которому запускается приложение.

В обработчике window.onload создается объект UserList, а к двум кнопкам привязываются обработчики, которые вызывают определенные методы объекта UserList.

И если мы запустим приложение. Затем последовательно нажмем на кнопку загрузки данных и на кнопку отображения, то веб-страница отобразит нам загруженные с сервера данные: