Извините разработчиков C# и Java, это не так, как работает TypeScript

Фотография на обложке от Лина Трочез на Unsplash .

Итак, вы взглянули на TypeScript. Классы и C-подобный синтаксис. Кажется достаточно простым.

Ваш менеджер просит вас ускорить функцию редактирования элемента задач в вашем совершенно новом приложении TypeScript.

Босс-мем от Сделайте мем

На стороне сервера у вас есть этот класс C#.

// TodoItem.cs
public class TodoItem
{
    public string Id { get; set; }
    public bool IsDone { get; set; }
    public string Title { get; set; }

    public async Task Save()
    {
        // Write to database
    }
}

C#: Элемент задачи.

На стороне клиента вы создаете аналогичный класс.

// todo-item.ts
class TodoItem {
  id: string;
  isDone: boolean;
  title: string;

  save(): Promise {
    return fetch("/todo/" + this.id, {
      body: JSON.stringify(this),
      method: "POST",
    })
      .then(() => undefined);
  }
}

Машинопись: Элемент задачи.

Не так уж плохо.

У нас есть представление для редактирования элемента todo. Класс view считывает элемент todo с сервера с помощью fetch , который возвращает HttpResponse .

// edit-todo-item-view.ts
class EditTodoItemView {
  todoItem: TodoItem;

  onInitialize(id: string): Promise {
    return this.readTodoItem(id)
      .then(todoItem => this.todoItem = todoItem)
      .then(() => undefined);
  }

  readTodoItem(id: string): Promise {
    return fetch("/todo/" + id)
      .then((response: HttpResponse) => response.json());
  }

  saveTodoItem(): Promise {
    return this.todoItem.save();
  }
}

Машинописный текст: Отредактируйте представление элемента задачи.

HttpResponse s может быть проанализирован как JSON с помощью метода HttpResponse#json .

Мы добавляем тип TodoItem к возвращаемому обещанию метода readTodoItem .

Приложение переходит на JavaScript без ошибок , поэтому мы развертываем его на веб-сервере.

Мы сообщаем нашему менеджеру, что функция редактирования элемента задач выполнена, и переходим к следующей задаче.

Мем Бората от Генератор мемов

Все хорошо… Пока мы не начнем получать сообщения об ошибках от пользователей, сообщающих, что они отредактировали элемент todo и сохранили его. Но когда они вернулись к списку задач, элемент задач не был обновлен.

Доставай меня, Нефо

Но… Он скомпилирован! Неужели TypeScript подвел нас?

JavaScript – это свободно типизированный язык программирования, и TypeScript этого не меняет, даже если так кажется.

Машинопись не лгала нам. Мы лгали TypeScript. Это легко пропустить, но мы сказали TypeScript передать объект JSON тип TodoItem //.

Проблема в том, что объект JSON никогда не создавался из TodoItem класс с ключевым словом new . На самом деле это был анонимный объект без доступа к прототипу TodoItem .

Чтобы исправить ошибку, мы должны внести несколько изменений.

// todo-item.ts
class TodoItem {
  id: string;
  isDone: boolean;
  title: string;

  constructor(properties) {
    this.id = properties.id;
    this.isDone = properties.isDone;
    this.title = properties.title;
  }

  save(): Promise {
    return fetch("/todo/" + this.id, {
      body: JSON.stringify(this),
      method: "POST",
    })
      .then(() => undefined);
  }
}

Машинопись: Элемент задачи с конструктором.

Мы добавляем конструктор, которому мы можем передать объект JSON и получить обратно экземпляр TodoItem .

// edit-todo-item-view.ts
class EditTodoItemView {
  todoItem: TodoItem;

  onInitialize(id: string): Promise {
    return this.readTodoItem(id)
      .then(todoItem => this.todoItem = todoItem)
      .then(() => undefined);
  }

  readTodoItem(id: string): Promise {
    return fetch("/todo/" + id)
      .then((response: HttpResponse) => response.json())
      .then(json => new TodoItem(json));
  }

  saveTodoItem(): Promise {
    return this.todoItem.save();
  }
}

Машинописный текст: Отредактируйте представление элемента задачи, используя новое ключевое слово.

После считывания JSON с сервера мы передаем его в конструктор TodoItem и получаем обратно фактический экземпляр класса.

Мы переносим код, развертываем его на веб-сервере и на этот раз не забываем его протестировать… В производстве, конечно 🤪

Мем Обамы от Генератор мемов .

Посвящается всем трудолюбивым серверным разработчикам, которые вынуждены изучать веб-разработку на стороне клиента.

Оригинал: “https://dev.to/this-is-learning/sorry-c-and-java-developers-this-is-not-how-typescript-works-401”