Все потоки
Поиск
Написать публикацию
Обновить
27.61

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Основы TypeScript, необходимые для разработки Angular-приложений

Время на прочтение7 мин
Количество просмотров66K
TypeScript — это надмножество JavaScript, то есть, любой код на JS является правильным с точки зрения TypeScript. Однако, TypeScript обладает некоторыми дополнительными возможностями, которые не входят в JavaScript. Среди них — строгая типизация (то есть, указание типа переменной при её объявлении, что позволяет сделать поведение кода более предсказуемым и упростить отладку), механизмы объектно-ориентированного программирования и многое другое. Браузеры не поддерживают TypeScript напрямую, поэтому код на TS надо транспилировать в JavaScript.

image

TypeScript применяется для разработки веб-приложений с использованием популярного фреймворка Angular. В этом материале мы рассмотрим основы TypeScript, необходимые для того, чтобы приступить к освоению Angular и к работе с ним.
Читать дальше →

TypeScript: Библиотека tslib

Время на прочтение4 мин
Количество просмотров11K

Перевод. Оригинал по ссылке.


В некоторых случаях компилятор TypeScript вставляет вспомогательные функции в сгенерированный JavaScript код, которые потом вызываются во время исполнения. Каждая такая вспомогательная функция эмулирует семантику особенности языка, которая ещё не поддерживается браузерами нативно.


В настоящее время в TypeScript существуют следующие вспомогательные функции:


  • __extends для наследования
  • __assign для spread оператора
  • __rest для rest оператора
  • __decorate, __param и __metadata для декораторов
  • __awaiter и __generator для async/await
Читать дальше →

Angular 5

Время на прочтение29 мин
Количество просмотров185K

Введение


1 ноября 2017 года Google анонсировали мажорную версию Angular 5.0.0 под кодовым названием «пятиугольный пончик». Новая версия включает в себя новые функции и исправления ошибок, и в тоже время основной упор был снова сделан на то, чтобы уменьшить размер Angular, сделать его быстрым и простым в использовании. Полное описание всех изменений, включая критические, можно посмотреть в changelog файле официального репозитория Angular.


От переводчиков


Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о вышедшей новой версии, кратко рассмотрим некоторые из наиболее важных изменений и вспомним историю Angular. Также для тех кто только начинает изучать этот фреймворк, мы рассмотрим примеры того, как быстро разворачивать приложение на Angular. Хотелось бы отметить, что вы можете присоединиться к отечественному сообществу Angular в Telegram, а также посещать Angular Meetup в Москве.

Читать дальше →

Чем хорош (и чем плох) Typescript: опыт UI-разработчиков

Время на прочтение4 мин
Количество просмотров26K
Здравствуйте, меня зовут Александр Черников. Я руковожу разработкой UI проекта “Цифровой корпоративный банк” — обновлённой версии Сбербанк Бизнес Онлайн, интернет-банка для юридических лиц. Мы разрабатываем stand-alone клиент, мобильное приложение и, собственно, web-клиент, о котором и пойдёт речь. В своих статьях я буду делиться ценным опытом нашей команды, а конкретно в этом посте опишу наш технологический стек и остановлюсь на том, почему мы выбрали Typescript в качестве основного языка.


Читать дальше →

Окружение для разработки веб-приложений на TypeScript и React: от 'hello world' до современного SPA. Часть 2

Время на прочтение14 мин
Количество просмотров15K
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.

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

image
Читать дальше →

Окружение для разработки веб-приложений на TypeScript и React: от 'hello world' до современного SPA. Часть 1

Время на прочтение14 мин
Количество просмотров39K
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.

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

Автор полностью открыт для доработки и исправления текущей статьи, и надеется на превращение итогового материала в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.

image
Читать дальше →

Первая демонстрация TypeScript

Время на прочтение10 мин
Количество просмотров16K
Совсем недавно состоялась пятая годовщина TypeScript, и у меня появилась возможность увидеться с Андерсом и командой разработчиков на еженедельном техническом совещании. Мне хотелось поздравить их с важной вехой в жизни TypeScript, сказать им о том, как много они сделали за те четыре года, которые прошли с даты моего ухода из проекта.



Кроме того, я разыскал некоторые старые демки, сделанные на TypeScript в самом начале работы над проектом (тогда он назывался Strada), для того, чтобы посмотреть их вместе с теми, кто работает над TypeScript сейчас.

Сегодня я хочу рассказать о том, с чего начинался TypeScript.
Читать дальше →

Использование преимуществ TypeScript в JavaScript разработке

Время на прочтение3 мин
Количество просмотров18K

Язык программирования TypeScript от Microsoft привносит многие преимущества статической типизации в JavaScript. Несмотря на то, что он не проверяет типы во время исполнения, он позволяет производить более точный статический анализ, повышает безопасность и открывает возможности для лучшей интеграции с IDE. Код на TypeScript обычно транспилируется в стандартный JavaScript, который выполняется в браузерах или Node.js. Учитывая привлекательность TypeScript, не удивительно, что его популярность быстро растёт.

Читать дальше →

Типичное использование Observable объектов в Angular 4

Время на прочтение5 мин
Количество просмотров79K

Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.



Подписка на параметр роутера и мапинг на другой Observable


Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.


Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.


// UserDetailsComponent

ngOnInit() {
  this.route.params
    .pluck('userId') // получаем userId из параметров
    .switchMap(userId => this.userService.getData(userId))
    .subscribe(user => this.user = user);
}

Читать дальше →

Как я перестал любить Angular

Время на прочтение21 мин
Количество просмотров115K

Вступление


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


На дворе 2017ый год и для каждого нового продукта/проекта встает вопрос выбора фреймворка для разработки. Долгое время я был уверен, что новый Angular 2/4 (далее просто Angular) станет главным трендом enterprise разработки еще на несколько лет вперед и даже не сомневался что буду работать только с ним.


Сегодня я сам отказываюсь использовать его в своем следующем проекте.


Дисклеймер: данная статья строго субъективна, но таков мой личный взгляд на происходящее и касается разработки enterprise-level приложений.

Читать дальше →

Настройка среды разработки Webpack 3 + Angular 4: от сложного к простому

Время на прочтение13 мин
Количество просмотров24K
Всем привет!

Современное front-end-приложение на Angular должно включать в себя следующие характеристики:

  • Возможность использования типизированного JS — Typescript
  • Обеспечение удобства и производительности разработки с помощью HMR (hot module replacement);
  • Модульность приложений и возможность отложенной загрузки модулей (Lazy Loading);
  • AoT — режим (ahead-of-time), повышающий производительность приложения.

Существует много вариантов сборки, решающих эти задачи (angular cli, A2 seed и т. д.). Обычно они имеют сложную структуру, плохо настраиваются/расширяются и представляют собой монолит, который невозможно изменить.

В статье я расскажу, как совместить Angular 2+ с webpack и разобраться со всеми этапами сборки/разработки.

Вы удивитесь, как это просто.
Читать дальше →

Как я браузерный 3D-футбол писала. Часть 1

Время на прочтение8 мин
Количество просмотров22K
Привет, Хабр! Хочу поделиться историей о том, как я браузерный 3D-футбол писала. Началось всё с того, что мой муж любит футбол. Смотрит трансляции, ходит на игры, играет на телефоне. И вот, чтобы сделать ему сюрприз, а также, чтобы хоть ненадолго оторвать от девайса с игрой, решила написать свою игру.



Под катом я расскажу как дружила TypeScript и Three.js и что из этого получилось.
Читать дальше →

Почему мы выбрали TypeScript: история разработчиков из Reddit

Время на прочтение7 мин
Количество просмотров18K
image Примерно полгода назад CEO Reddit Стив сообщил о том, что мы перепроектируем сайт. Главный вопрос тут — как именно мы этим занимаемся. В наше время фронтенд-разработка очень сильно отличается от того, что было во времена, когда Reddit появился на свет. Сейчас имеется огромный выбор вариантов для каждой подсистемы веб-приложения. Как рендерить страницы? Как стилизовать контент? Как хранить и обслуживать картинки и видеофайлы? Как писать код? В современных условиях ни на один из этих вопросов нет готового ответа.

Одним из первых подобных вопросов, на который нам необходимо было найти ответ, звучал так: «Какой язык выбрать?».
Читать дальше →

Ближайшие события

Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн

Время на прочтение8 мин
Количество просмотров12K


Мобильный веб развивается семимильными шагами. На дворе 2017 год. Мобильный трафик превысил десктопный — больше половины всех страниц теперь открываются через телефоны или планшеты. В 2015 году Google объявил о предпочтении mobile-friendly сайтов при ранжировании выдачи, а в 2016 это сделал Яндекс. Юзеры проводят в интернете 60-70 часов в месяц с мобильных устройств и не готовы идти на компромисс и пользоваться неадаптивными сайтами. И 2ГИС — не исключение. За 2 года рост мобильного трафика 2ГИС Онлайн составил 74%, а месячная аудитория превысила 6 миллионов человек.


17 апреля мы зарелизили новый мобильный онлайн («Монлайн») — одностраничное приложение, доступное по адресу m.2gis.ru. Приложение запущено в двух городах: Уфе и Новосибирске, а в ближайшее время планируется релиз на всю Россию.

Читать дальше →

Что нового в IntelliJ IDEA 2017.2

Время на прочтение4 мин
Количество просмотров28K
Привет, Хабр! Мы рады сообщить о выходе крупного обновления IDE – IntelliJ IDEA 2017.2. Поскольку далеко не все следят за новостями в нашем официальном блоге (а также потому, что многим удобнее будет прочитать об этом на русском), в этом посте я расскажу что ждать от новой версии IDE. Кто спешит попробовать обновление самостоятельно, качайте с сайта JetBrains, либо из Toolbox App. Все остальные, добро пожаловать под кат.


Читать дальше →

WebStorm 2017.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha

Время на прочтение4 мин
Количество просмотров16K
На этой неделе вышло большое обновление WebStorm. В этом посте мы расскажем подробнее о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.2 и других IDE JetBrains версии 2017.2.

Вы можете прочитать подробнее о WebStorm 2017.2 и скачать его на нашем сайте.

Улучшения в поддержке JavaScript и TypeScript


Move symbol


Новый рефакторинг Move symbol переносит классы, глобальные функции и переменные из одного JavaScript или TypeScript файла в другой. IDE автоматически добавит экспорт и обновит ES6-импорты в файлах, где используется этот символ.

Чтобы вызвать этот рефакторинг, поставьте курсор на символ в ES6-модуле и нажмите F6.


Читать дальше →

Динамический рендеринг компонентов в Angular 2

Время на прочтение4 мин
Количество просмотров19K

Вступительное слово


В процессе работы над проектом на Angular 2 с использованием карт возникла следующая задача: требуется срендерить свой ангуляровский компонент в стандартный popup leaflet’а. В данной статье динамический рендеринг компонентов будет рассмотрен в разрезе именно этой задачи, однако аналогичным образом можно использовать эту информацию в собственных кейсах.
Читать дальше →

От «нового числового формата» до «кода как UI»: как прошла HolyJS 2017 Piter

Время на прочтение6 мин
Количество просмотров6K


Лишнее подтверждение тому, как стремителен мир JavaScript: всего лишь полгода назад, когда конференция HolyJS проходила в Москве, актуален был Angular 2, а теперь к петербургской успел выйти Angular 4. Будем считать, что существовал ещё и третий, но мы моргнули и пропустили его!

Раз всё так быстро меняется, то что было на самой конференции по сравнению с предыдущей? Как выступил именитый Дуглас Крокфорд? О чём были другие заметные доклады? Всё это — под катом.
Читать дальше →

Типизированные компоненты в Vue.js, или как подружить Vue, TypeScript и Webpack

Время на прочтение4 мин
Количество просмотров40K

Речь в данной статье пойдет о довольно необычном сочетании технологий: Vue.js + TypeScript + Webpack, в разрезе single-file компонентов. Решение данной задачи отняло у меня приличное количество времени с первого захода, поскольку исчерпывающее объяснение того, как использовать все это вместе, да и еще с рядом ограничений (NPM предоставляет нам runtime-only build Vue.js), найти в цельном виде практически невозможно. Если вас заинтересовала данная тема, то приглашаю к дальнейшему чтению.
Читать дальше →

Создание минимального ASP.NET Core веб-приложения с поддержкой npm, Webpack и TypeScript в Visual Studio 2017

Время на прочтение9 мин
Количество просмотров35K

Введение


Этот туториал я пишу прежде всего для себя, для того чтобы иметь возможность быстро на основе начального шаблона ASP.NET Core приложения создать минимальное приложение с поддержкой npm, Webpack и TypeScript (у которого будет работать отладка из Visual Studio).

Читать дальше →