Возвращение Кукуси #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


Комментарии 12


Чтобы читать и оставлять комментарии вам необходимо зарегистрироваться и авторизоваться на сайте.

Моя страницаНастройкиВыход
Отмена Подтверждаю
100%
Отмена Подтверждаю
Отмена Подтверждаю