Server sync... Block time in database: 1565931969, server time: 1566677288, offset: 745319

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


Comments 12


о, а вот это интересно почитать будет) лайк за пост) подпишусь, надеюсь, взаимно)

01.06.2017 16:59
0

Даша, с возвращением ;)

01.06.2017 17:01
0

Столько времени...Рад снова видеть Ваши посты в Голос!
С возвращением!:)
Сегодня смотрел делегатов.
Я за Вас проголосовал и хотел отозвать свой голос.
Хорошо, что Вы вернулись !

01.06.2017 19:14
0

Спасибо большое ?
Буду стараться больше не разочаровывать ?

02.06.2017 02:03
0

Спасибо.
Хорошего Вам дня и настроения!

02.06.2017 05:18
0

@qqc Очень рад, вы снова в строю! Успехов и новых отличных идей и их воплощений))

01.06.2017 19:30
0

С возвращением) Я пока в начале изучения js, но уже наслушалась много разных мнений по поводу React vs Angular (в основном в формате холивара и с "пеной у рта"). Интересно будет читать про Angular, чтобы мнение о нем составить и понять для каких задач он используется =)

02.06.2017 04:20
0

я на Reacte не пробовала писать ) но девочка, с которой мы пришли одновременно на эту стажировку, раньше, как раз на Reacte работала ))) сначала тоже пыхтела, возмущалась...сейчас или привыкла, или тоже полюбила Angular ❤️ А так да, война там недетская ) но наш тим-лид уверяет, что Angular гораздо круче )) я ему верю ?

02.06.2017 04:43
0

На сколько я понимаю, вход в Angular ниже, чем в React. Ну и просто они используются под разные задачи. И все споры сводятся к сравниванию острого и горячего =)

02.06.2017 04:53
0

Сложно, но очень интересно :)

02.06.2017 04:30
0

Дальше еще прикольнее )

02.06.2017 04:46
0