Возвращение Кукуси #2 или введение в TypeScript ❤️

Всем огромный привет от пропавшей Кукуси ) Классно я вернулась тогда, да? На этот раз всё, теперь я точно снова с вами.

Как я и рассказывала вам уже, у нас в компании есть карьерная лестница с довольно четко описанными требованиями для каждой из её ступеней. И в понедельник утром, я сдала свой первый здешний экзамен и перешла на новый уровень.

Вообще, за эти три месяца нужно было пройти три курса на coursera, которые я могу смело всем советовать. Отличный преподаватель, очень интересные занятия - не слишком длинные, и очень полезные.

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

Работая на фрилансе, я в основном использовала фреймворк AngularJS. Angular - это не то же самое, вообще многие называют его Angular 2, но на самом деле, он просто Angular. И я в него влюблена.

Наверняка, найдутся те, кто скажет, что есть что-нибудь покруче, поудобнее. И возможно так оно и есть, но пока я очень довольна этим фреймворком.

Angular написан на TypeScript и поэтому TS - один из основных инструментов работы с Angular.

Сегодня я хочу немного познакомить вас с TypeScriptом.

Я до этого писала целую серию уроков о JS, TypeScript же - надмножество JavaScript, которая решает его недостатки. Например, делает возможной статическую типизацию и использование классов, как это принято в объектно-ориентированных языках программирования. По факту, код, написанный на TypeScript, компилируется в код JS.

Как я уже сказала, TS - язык со статической типизацией, то есть в ходе выполнения программы изменить тип не получится. Это позволяет уменьшить количество ошибок и отловить многие из них еще на этапе компиляции. TS поддерживает все типы, имеющиеся в JavaScript, дополняя их типом перечислений - enum.

В JavaScript используется прототипное программирование, которое может взорвать мозг любого программиста, не говоря уже о тех, кто писал на С++, Java или каком-либо другом традиционном объектно-ориентированном языке программирования. Собственно TypeScript решает и эту проблему.

Давайте вкратце еще расскажу о паре основных понятиях ООП (это был мой самый нелюбимый курс в университете, о чем я сейчас очень жалею).

• Класс - это описание сущности, где определяется её состояние и поведение, зависящее от этого состояния, а также правила для взаимодействия с данной сущностью (контракт).

  С точки зрения программирования класс можно рассматривать как набор данных (полей, атрибутов, членов класса) и функций для работы с ними (методов).

  С точки зрения структуры программы, класс является сложным типом данных.

  class User {
  public name: string;

  public printPost (post: {theme?: string, body: string }) {
   console.log(post);
  }
}

class GolosUser extends User {
 public reputation: number;
 public printPost (post: { body: string }) {
  console.log(this.name, this.reputation);
  console.log(post);
  }
}

• В TypeScript интерфейсывыполняют функцию именования типов, и являются мощным способом определения соглашений внутри кода, а также за пределами проекта.

  Чтобы наглядно показать, как это работает, давайте попробуем разобрать маленький пример:

  function printPost(post: { theme: string, body: string }) {
  console.log(post.body);
}

let myPost= {theme: "TypeScript", body: "TypeScript - это..."};
printPost(myPost);

  У нас есть функция printPost, которая принимает один параметр - post, у которого, в свою очередь, требуются два свойства: theme и body, оба - строковые (типа string).

  Этот же код можно переписать следующим образом:

  interface IPost{
  theme?: string,
  body: string
}

function printPost(post: IPost) {
  console.log(post.body);
}

let myPost= {body: "TypeScript - это..."};
printPost(myPost);

  Теперь у нас есть интерфейс IPost - это имя можно будет использовать, чтобы задавать требования о том, какие свойства должен иметь объект post.

  Обратите внимание, что в интерфейсе свойство theme необязательное.

Для написания этой статьи использовались источники:

1. Документация TypeScript
2. ООП с примерами (часть 1)

Ну а дальше TypeScript будем изучать в паре с Angular... До следующего урока! 😉