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

TypeScript *

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

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

NodeJS Бот для Телеграм с обработкой математических выражений

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

Начало работы


Сначала создаём каталог где будет храниться сам бот.

Пустой каталог с ботом

Здесь инициализируем npm.

npm init

Инициализация npm

Используемые модули


В разработке я буду использовать TypeScript и библиотеку SlimBot.
Читать дальше →

Лабаем на MIDI-клавиатуре в Angular

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

Web MIDI API — интересный зверь. Хоть он и существует уже почти пять лет, его все еще поддерживает только Chromium. Но это не помешает нам создать полноценный синтезатор в Angular. Пора поднять Web Audio API на новый уровень!


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

Typescript Compiler API: возьми управление компилятором в свои руки

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


В разработке приложений на Typescript всегда есть этап сборки проекта. Обычно для этого используются системы сборки и автоматизации workflow, такие как webpack или gulp, обвешанные достаточным количеством плагинов, либо процесс сборки размазывается в командах package.json и шелл-скриптах с использованием нативного tsc или команд CLI используемого в проекте фреймворка. Все эти решения имеют свои плюсы и минусы. Зачастую в процессе сборки нужно сделать что-то нестандартное, и оказывается, что используемая система сборки не предоставляет нужную функциональность из коробки, а имеющиеся плагины делают не совсем то, что надо. В такие моменты работа над проектом встает, и начинается судорожное ковыряние в конфигах и поиск подходящего плагина. В какой-то момент понимаешь, что за время, потраченное на поиск подходящего костыля, можно было написать свое решение.

Во многих случаях критичные процессы в проекте можно автоматизировать скриптами на javascript, выразительность и функциональность которого вполне позволяет описать нужный workflow и выбирать из всего разнообразия библиотек, не заморачиваясь наличием для них плагинов под конкретную систему сборки. Важное преимущество такого подхода – полный контроль над процессами и максимальная гибкость. Для проектов, в которых используется Typescript в качестве основного языка разработки, возникает вопрос, как встроить процесс его компиляции в свой workflow. Здесь на помощь приходит Typescript Compiler API. В этой статье мы посмотрим, как его можно использовать для того, чтобы выполнить компиляцию проекта, реализованного на Typescript, взаимодействуя с компилятором на разных этапах его работы и напишем скрипт для hot-reloading’а REST-сервера, разработанного на Nest.js.
Читать дальше →

Используем DI в Angular по максимуму — концепция частных провайдеров

Время на прочтение7 мин
Количество просмотров37K
В Angular очень мощный механизм Dependency Injection. Он позволяет передавать по вашему приложению любые данные, преобразовывать и переопределять их в нужных частях.

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

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

В этой статье я хотел бы показать альтернативный вариант работы с полученными из DI данными. Цель: упростить компоненты, директивы и сервисы, которые эти данные используют.


Todo-лист для командной строки на Deno

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

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


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


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

Как я закрыл трехлетний issue в TypeScript

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


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

Я засучил рукава и решил это исправить.
Читать дальше →

Великий раскол в import: проясняем неопределенность с импортом в Typescript

Время на прочтение5 мин
Количество просмотров11K
Перевод статьи подготовлен в преддверии старта курса «Разработчик React.js»




Я довольно долго работаю с typescript, и у меня было много проблем с тем, чтобы разобраться с его модулями и советующими настройками, и должен сказать, вокруг них и вправду много непонятного. Пространства имен, import * as React from 'react', esModuleInterop и т.д. Поэтому давайте разберемся из-за чего поднялась вся шумиха.

Я не буду говорить о пространствах имен как о модульной системе в typescript, поскольку идея оказалась не лучшей (особенно учитывая текущий вектор развития), и этим никто сейчас не пользуется.
Читать дальше →

Почему лучше заранее компилировать TS в JS

Время на прочтение2 мин
Количество просмотров7.7K
Однажды встал вопрос: «Использовать ранеры, которые будут на лету компилировать TypeScript в JavaScript (например, node-ts), или компилировать самому заранее (например, через `tsc`) и запускать уже JavaScript код?» – гугление не дало четкого ответа, поэтому я сформулировал его императивным путем:
TypeScript стоит компилировать заранее, через специализированные компиляторы (например, tsc) и запускать уже JS код.

Пара злободневных причин:
Читать дальше →

Минифицируем приватные поля в TypeScript. Доклад Яндекса

Время на прочтение13 мин
Количество просмотров7.5K
Меня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер.

Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта.


Конспект и видео будут полезны разработчикам, которые ищут дополнительные способы оптимизации своего кода и хотят узнать, как webpack, Babel и TypeScript могут в этом помочь. В конце будут ссылки на GitHub и npm.
Читать дальше →

Редактор игрового движка: визуализация файловой структуры проекта

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

Всем привет, меня зовут Александр, я frontend-разработчик. Моя карьера программиста началась относительно недавно, у меня нет специального образования и долгое время я работал совершенно в другой области. Поскольку IT сфера весьма быстро развивается, мне приходится постоянно учиться в ускоренном темпе, чтобы поспеть за своими коллегами с большим опытом за спиной. Для саморазвития, в свободное от работы время, я решил начать свой pet-проект.
Читать дальше →

Объясните мне, как вы для себя разобрались в моделях типизаций — они же все размыты

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


Когда я был начинающим, я мог писать простые приложения на C# и C++. Долго игрался с консольными прогами, пощупал десктопные, и в какой-то момент захотел сделать сайт. Меня ждал большой сюрприз — чтобы делать сайты, одного сишарпа мало. Надо ещё знать жс, хтмл, цсс и прочую фронтовую хрень. Я потратил около недели на эти вещи, и понял — не мое. Я мог написать какой то код на джаваскрипт, но он не содержал типов, и я никак не мог взять в толк — как к этому вообще подходить. Это какое-то игрушечное программирование. Ну и забросил к чертям.


Уже потом, работе на третьей, меня перевели в отдел, где делали веб. Я подумывал уволиться, но мне объяснили — там тайпскрипт, тайпскрипт — это такой сишарп для браузера.


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

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

12 советов по внедрению TypeScript в React-приложениях

Время на прочтение9 мин
Количество просмотров37K
TypeScript — стандарт современной фронтенд-разработки. Согласно исследованиям State of JavaScript, TS вызывает явный интерес у программистов. По данным опроса за 2019 год, почти 60% респондентов пробовали TS и продолжают использовать, 22% не пробовали и желают изучить.

Эта статья — сборник советов о том, как внедрить и улучшить использование TypeScript. Первая половина советов общая, касающаяся подходов и инфраструктуры. Вторая — несколько особо полезных фишек языка.


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

TS-Serializable 2: с конвертации свойств из snake case и декоратором вместо наследования

Время на прочтение3 мин
Количество просмотров2.8K
Недавно мне повезло попасть на проект бэкенд которого написан на php. А как принято у php бекэндов json с ответом они отправляют в snake case стиле. И как следствие вся работа с данными на фронте происходила в перемешку в camel case и snake case стилях. Для решения этой проблемы была доработана библиотека сериализации ts-serializable. Теперь при получении данных из json их можно приводить к принятому в js стилю camel case, а при отправке на сервер возвращать в snake case.

ts-serializable

Так же после выхода первой версии у некоторых пользователей были пожелания по функционалу. Эти пожелания реализованы в новой версии.
Читать дальше →

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

Разработка компилятора для TypeScript на TypeScript на базе LLVM

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


Порой разработчики во время работы придумывают безумные идеи проектов, и они даже пытаются их реализовывать. Подобное ощутил и фулстек-разработчик Дмитрий Пацура, когда решил написать компилятор для TypeScript на… TypeScript, используя LLVM.

А что из этого вышло, Дмитрий изложил на прошедшей HolyJS 2019 Moscow. Под катом вы найдете видео и конспект его доклада.

Постепенно вводим TypeScript в ваш проект на React

Время на прочтение7 мин
Количество просмотров13K
Привет, Хабр!

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


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

Эффект реалистичного перелистывания страниц на JS

Время на прочтение4 мин
Количество просмотров28K
Представляю вашему вниманию — один из возможных вариантов реализации довольно забавного приема, для создания эффекта реалистичного перелистывания страниц.



Демо и документация
Github
Плагин для React

Подобный эффект я реализовывал данным давно, еще в университете и на Delphi. Получилось вполне достойно, правда времени я потратил тогда очень много. Сейчас, во время самоизоляции, стало интересно реализовать что-то подобное на JS, для PC и мобильных устройств.

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

Написано все на Typescript. Не использовались ни какие сторонние библиотеки. Зависимостей нет.

Ключевые особенности библиотеки


  • Работает как с простыми изображениями, с отрисовкой на canvas, так и с html блоками — используя css трансформации
  • Довольно гибкая система конфигурации и простое API
  • Поддерживает мобильные устройства
  • Автоматическая смена ориентации между портретным и ландшафтным режимом
Читать дальше →

Vuex нарушает инкапсуляцию

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

Когда мой проект на Vue начал разрастаться и достиг нескольких сотен компонентов, я задумался о подходе Vue и Vuex к архитектуре проекта.


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

Переносим Angular проект на ESLint, с Prettier, Husky и lint-staged

Время на прочтение8 мин
Количество просмотров34K
Привет, Хабр! Меня зовут Богдан, я работаю в ПИК Digital Front-End тимлидом. Большую часть проектов мы разрабатываем на Angular и недавно я решил пересмотреть наши стайл гайды, а также добавить новые инструменты для более удобной работы.

В качестве линтера я решил использовать ESLint, так как в скором времени на него планируют перевести Angular. И в этой статье я хочу поделиться инструкцией по переходу с TSLint на ESLint, а заодно рассказать, как запускать Prettier из ESLint, как добавить правила стайл гайда AirBnB, и как сделать линтинг удобным и незаметным с помощью настройки VS Code и Git хуков.
Читать дальше →

Как тестировать код, содержащий setTimeout/setInterval под капотом

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

Мы, разработчики, очень любим юнит-тесты, полезность которых очевидна. И чтобы эти тесты действительно были полезными, а не приносили боль, необходимо обеспечивать их стабильность.


Наша компания разрабатывает интерфейсный фреймворк "Wasaby" и продает построенные на его базе продукты, представляющие собой облачные и десктопные приложения. Релизный цикл у нас жестко привязан к календарю, а для контроля качества продукта настроены процессы непрерывной инеграции. Мы используем Jenkins для сборок и Mocha в связке с Chai assert для юнит тестирования JavaScript кода. И недавно мы столкнулись с ситуацией, когда мониторинг сборок стал показывать, что примерно половина всех случаев их падения приходится на нестабильные юнит-тесты JavaScript. Симптоматика при этом одинаковая: отдельный тест из набора либо не успевает выполниться, либо возвращает не тот результат, что ожидается. И анализ кейсов практически всегда выявляет факт, что падает тест, содержащий вызовы функций setTimeout или setInterval в собственном, либо в тестируемом коде. О том, как правильно поступить в этой ситуации, мы и будем говорить дальше.

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

Deno v1.0: Безопасная среда выполнения для JavaScript и TypeScript. Обзор возможностей

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


  1. Вступление
  2. Установка
  3. Как это выглядит внутри
  4. Функциональность
  5. WASM, RUST, Плагины
  6. Debugging, IDE
  7. Тестирование
  8. Compiler API
  9. CI
  10. Разное

Вступление


Если вы уже оказались за чтением этой статьи, то наверняка уже слышали про выступление Ryan Dahl, создателя NodeJS, на JSConf, где он выступил с докладом и рассказал о ключевых ошибках, которые были сделаны при проектировании NodeJS. В этом же докладе он обьявил о новом проекте: Deno, в котором будут учтены ошибки предыдущего проектирования.


Вдохновившись этим анонсом, я внимательно стал следить за проектом и пробовать реализовывать на нем различные проекты.

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