Как стать автором
Обновить
34.92

TypeScript *

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

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

Шаблон декомпозиции Model-View-Presenter

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

MVP
MVP
// Presenter
class User_preview {
	user: User
	card = new Card({
		image: ()=> this.user.avatar,
		message: ()=> this.user.nickname,
		color: ()=> this.user.skin.color,
		click: ()=> this.skin_change(),
	})
	skin_change() {
		this.user.skin = Skin.random()
	}
}

// View
<div class="Card" onclick={click} style={{ background: color }}>
	<img src={ image } />
	<p>{ message }</p>
</div>

// Model
class User extends Model {
	avatar: string
	nickname: string
	skin: Skin
}

✅ Легко добавлять новые отображения, не меняя модели. И наоборот.
✅ Изменение интерфесов модели или отображения требует изменения только лишь презентеров.
❌ Трёх слоёв слишком мало на больших масштабах.
❌ Для использования состояния одного презентера из другого необходимо искусственное вынесение его в модели.

Теги:
Всего голосов 10: ↑7 и ↓3+4
Комментарии0

Шаблон декомпозиции Model-View-Controller

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

MVC
MVC
// Controller
class Users_resource {
	GET() {
		return User.all.map( user_brief )
	}
}

// View
function user_brief( user: User ) {
	return {
		id: user.guid,
		name: user.passport.name_full,
	}
}

// Model
class User {
	
	static all = [] as User[]
	
	guid: GUID
	passports: Passport[]
	resumes: Resume[]
	
	get passport() {
		return this.passports[0]
	}
	
}

✅ Отображение может использовать произвольные модели с тем же интерфейсом.
✅ Легко добавлять новые отображения, не меняя модели. И наоборот.
❌ Для отображения разных типов моделей необходимо дублировать код отображения.
❌ Изменение интерфейса модели требует обновления всех использующих её отображений и контроллеров.
❌ Трёх слоёв слишком мало на больших масштабах.

Теги:
Всего голосов 8: ↑2 и ↓6-4
Комментарии7

⚛️ React 19 — use(Promise)

use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.

Основные моменты:

  • На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.

  • Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.

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

  • Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary.

Материалы

https://t.me/cherkashindev/182

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Весна, TypeScript, A?.Frontend Community #6 🌼

21 марта состоится уже 6-я встреча сообщества A?.Frontend, на которой мы подробно поговорим о TypeScript, сравним его с JS, определим плюсы и минусы использования. Кратко о программе.

🌿 TypeScript: Введение в мир надежного программирования

Александр Чернов, Frontend-разработчик в Альфа-Банке, расскажет, как при помощи TypeScript сделать код надёжнее. 

🌿 Переход на TypeScript: плавные перемены и непредвиденные сложности

Рустам Султанбеков, Middle Frontend-разработчик в Авито, поделится опытом перевода существующего приложения на TypeScript и поможет понять, стоит ли это делать. 

🌿 Генерируй – типизируй

Александр Серов, Senior Frontend-разработчик в UULA, объяснит, как пользоваться продвинутыми возможностями TypeScript. 

🌿 Generics – Что? Где? Когда?

Тёма Сенюков, старший разработчик интерфейсов в Яндексе, расскажет, как пользоваться Generics, чтобы избежать дублирования кода и ошибок. 

Митап пройдёт 21 марта (четверг) в 18:30 онлайн. Регистрируйтесь на митап по ссылке. Также ссылку на трансляцию мы опубликуем в нашей группе в Телеграмм, присоединяйтесь.

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Состоялся релиз TypeScript 5.4. В новой версии языка программирования, построенного на основе JavaScript и позволяющего объявлять и описывать типы, в Microsoft поработали над производительностью языка, добавили новые возможности автодополнения кода для редакторов и упростили способы переподключения библиотек. Типы также используются в инструментах редактора TypeScript, таких как автодополнение, навигация по коду и рефакторинг, которые доступны в Visual Studio и VS Code. Проект доступен через NuGet или npm (npm install -D typescript).

В TypeScript 5.4 появился новый тип утилиты NoInfer, добавлена поддержка вызовов require() в пакете --moduleResolution и --module save, быстрое исправление при добавлении отсутствующих параметров, поддержка автоматического импорта для подпутей, исправлены ранее обнаруженные ошибки.

С выходом TypeScript 5.4 Microsoft продолжает работу над TypeScript 5.5. Согласно дорожной карте, бета-версия этого проекта должна выйти 16 апреля, релиз-кандидат — 4 июня, а финальный релиз — 18 июня.

Также стало возможно запускать тестовые ночные сборки TypeScript 5.4 Nightlies через npm, которые выпускаются каждый день в полночь (npm install -D typescript@next) для VS Code, Visual Studio, Sublime Text и IntelliJ.

Теги:
Всего голосов 5: ↑4 и ↓1+3
Комментарии0

React — Compound Components

Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.

ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.

🔍 Основные характеристики:

  • Используется React контекст, чтобы управлять состоянием

  • Должен быть главный компонент, в котором хранится состояние и объявляется React контекст

  • Все дочерние компоненты используют состояние через React контекст

ℹ️ Он состоит из 2 простых подходов React:

  1. Композиция компонентов

  2. Паттерн “Провайдер” — использование контекста React 

📝 Вначале рассмотрим подходы по отдельности

1️⃣ Что такое композиция?

Вместо вот этого 

<Tile count={money} title="Стоимость" icon={<MoneyIcon/>}/>

Мы пишем вот так

<Tile>
  <Title>{title}</Title>
  <Number>{count}</Number>
  <Icon>{icon}</Icon>
</Tile>

2️⃣ Паттерн “Провайдер” 

Здесь идёт речь об обычном использовании контекста реакта, чтобы передавать какие-то данные на любую глубину дерева компонентов, минуя дочерние компоненты. 

🔄 Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.

https://t.me/cherkashindev/166

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Явное управление ресурсами в TypeScript — using

Недавно, когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally. 

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

Мне нравится рассматривать using, как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:

- создали объект, удалили

- показали спиннер и скрыли, когда получили данные

Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.

Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде.

useEffect(() => {
  (async () => {
    using manager = new LoadingManager(setIsLoading);
    await Promise.resolve().then(() => console.log("promise.resolve"));
  })();
 }, []);

/**
 * Класс, который управляет состоянием спиннера
 */
class LoadingManager {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
    console.log("constructor");
  }

  [Symbol.dispose]() {
    this.setIsLoading(false);
    console.log("disposer")
  }
}

// В консоли будет выведено в следующем порядке
// constructor

Код можно открыть в песочнице.

К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try/finally.

https://t.me/cherkashindev/164

Теги:
Всего голосов 2: ↑1 и ↓10
Комментарии8

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

Scrapscript лучше всего понимать с нескольких точек зрения:

  • «это JSON с типами, функциями и хешированными ссылками»;

  • «Это крошечный Haskell с чрезвычайной синтаксической согласованностью»;

  • «Это язык со странной особенностью IPFS».

Scrapscript решает проблему совместного использования программного обеспечения. Современное программное обеспечение ломает границы. API расходятся, пакеты разрушаются, конфигурации закостеневают, сериализация портится, git запутывается, зависимости ломаются, документация умирает, всплывают уязвимости и так далее.

Чтобы сделать программное обеспечение безопасным и доступным для совместного использования, Scrapscript сочетает в себе существующие знания по-новому: все выражения являются содержательно-адресуемыми «обрывками» все программы являются данными все программы «платформенные».

Эти простые решения в Scrapscript порождают новые парадигмы:

  • контентно-адресуемое всё;

  • всемирное совместное пространство имен;

  • никаких сломанных зависимостей;

  • управление версиями на уровне выражения.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии1

VKADSKIP - расширение промотает рекламу в видео VK за вас⁠⁠!

VKADSKIP - это бесплатное расширение для браузеров Google Chrome, Яндекс.Браузер и Opera.

Как это выглядит?

Когда пользователь VK Видео откроет видеоролик, по которому в базе данных уже есть размеченные участки, в плеере на полосе таймлайна появятся цветные сегменты, которые будут автоматически пропускаться во время просмотра. После пропуска участка отобразится уведомление о пропущенном участке с возможностью отмотать обратно. Также рядом с переключателем звука будет кнопка "Реклама в видео", где можно просмотреть подробную информацию и добавить новый сегмент для автопропуска.

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

Как это работает?

Пользователи (и команда асессоров) сами размечают на видеороликах участки с рекламой и другими типами лишнего контента. У всех других пользователей на тех же видеороликах появятся сегменты для автопропуска.

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

Загрузить расширение бесплатно:

Для браузера Google Chrome

Для браузера Яндекс.Браузер

Для браузера Opera

Теги:
Всего голосов 8: ↑8 и ↓0+8
Комментарии12

Выводим Мурыча на чистую воду

Топ перлов:

  • В JS нет переменных и присваивания, но есть потоки

  • Все числа выделяются в куче

  • TS не годится для разработки

  • let и const - главные перфоманс ботлнеки

Упоминаемые материалы:

Мета-сслыки:

Теги:
Всего голосов 14: ↑2 и ↓12-10
Комментарии4

Препарируем StyleX и находим родовые травмы

Решение от большой компании, но..

  • Раздутый как CSS, так и HTML, и даже JS

  • Несемантичный CSS и HTML

  • Околонулевая типизация без автодополнения

  • Много бойлерплейта

  • Зависимость от Babel

  • Тормозная сборка

  • Сложная отладка

Копилка благодарностей: https://boosty.to/hyoo

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Использование never в TypeScript

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

1. Явно с помощью width и height 

2. Диалог должен принять размер контента, за это отвечает свойство responsive

Тут есть несколько проблем:

1. Чтобы передать либо width и height или только responsive, мы пометили все поля как необязательные и теперь мы можем передать неправильный набор полей или не передать ни одного вовсе.

2. Можем передать все параметры одновременно и в таком случае непонятно, должен диалог быть отзывчивым или отобразиться с указанным размером. 

Нам нужно реализовать тип, в котором все поля будут обязательными, но который позволит нам передать либо width и height либо responsiv , в противном случае мы должны получить ошибку компиляции.

Такой интерфейс будет выглядеть вот так:

type DialogProps = { title: string } & (
  | {
      responsive: boolean;
      width?: never;
      height?: never;
    }
  | {

      responsive?: never;
      width: number;
      height: number;
    }

);

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

// ✅ correct 
const withSize: DialogProps = {
  title: "Dialog with Size",
  width: 600,
  height: 500,
  responsive: undefined
};

// ❌ incorrect
const incorrect: DialogProps = {
  title: "Incorrect Props Dialog",
  responsive: false,
  width: 600
  height: 500
};

В третьем примере мы получим ошибку 🎉.

https://t.me/cherkashindev/21

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии4

Amazon опубликовала компилятор jsii 1.90, представляющий собой модификацию компилятора TypeScript, позволяющую извлечь из компилируемых модулей информацию об API и сгенерировать универсальное представление данного API для обращения к JavaScript-классам из приложений на различных языках программирования. Код проекта написан на TypeScript и распространяется под лицензией Apache 2.0.

Jsii даёт возможность создавать на языке TypeScript библиотеки классов, которые могут использоваться в проектах на языках C#, Go, Java и Python, благодаря трансляции в родные для этих языков модули, предоставляющие тот же самый API. Инструментарий используется в AWS Cloud Development Kit для поставки библиотек для разных языков программирования, формируемых из одной кодовой базы. В новой версии jsii реализовано кэширование списка классов для каждой сборки и документировано, как можно превратить обязательное свойство в необязательное.

Источник: OpenNET.

Теги:
Рейтинг0
Комментарии0

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