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

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

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

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

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

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

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

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

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

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... До следующего урока! 😉


РецептыШитьёПутешествияСоветыСпортКнигиАнтошкаДашаTheDeveloperЯ
ИнстаграмТелеграмГитхабПодписаться@qqc
Все урокиФронтендJavaScript
образованиедашазэдевелоперурокиqqcурокиqqcфронтендурокиqqcтсангулар
79
232.053 GOLOS
1
В избранное
Даша Кукуся
Делегат Голоса 🤓 | frontend-разработчик 💻 | мама 👶 Антона | жена 💑 Миши
79
1

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (12)
Сортировать по:
Сначала старые