15 подписчиков
Явное управление ресурсами в TypeScript — using
Недавно, когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally.
Но мы можем использовать using не только, когда открываем файл или подключение к базе данных, иначе его использование ограничилось бы исключительно сервером.
Мне нравится рассматривать using, как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:
- создали объект, удалили
- показали спиннер и скрыли, когда получили данные
Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.
Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде.
// обычный код на React
useEffect(() => {
try {
setIsLoading(true);
await await Promise.resolve().then(() => console.log("promise.resolve"));
} finally {
setIsLoading(false);
}
}, [])
// такой же код, с использованием using
useEffect(() => {
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
// promise.resolve
// disposer
К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try / finally.
Ещё по теме:
#typescript #frontend
1 минута
29 января 2024