10 основных советов и трюков с TypeScript для разработчиков угловых приложений

Совет по TypeScript 6. Эффективное использование обобщений

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

Давайте рассмотрим следующий случай классической вспомогательной функции JS:

 function getOrUpdateFromCache(key, cb) { const value = getFromCache(key); if (value === undefined) { const newValue = cb(); setInCache(key, newValue); return newValue; } return value; } 

Перевод этого непосредственно в TypeScript оставляет нас с двумя any s: один — это данные, полученные из обратного вызова, а другой — от самой функции. Однако, это не должно выглядеть так, поскольку мы, очевидно, знаем тип (мы передаем в cb ):

 function getOrUpdateFromCache<T>(key: string, cb: () => T) { const value: T = getFromCache(key); if (value === undefined) { const newValue = cb(); setInCache(key, newValue); return newValue; } return value; } 

Единственная проблемная позиция в приведенном выше коде — это явное присвоение типа результату вызова функции getFromCache . Здесь мы должны доверять нашему коду на данный момент, чтобы последовательно использовать одни и те же типы для одних и тех же ключей. В совете по TypeScript 10 мы узнаем, как улучшить эту ситуацию.

В большинстве случаев универсальные шаблоны используются только для «прохождения» типа, то есть для обучения TypeScript относительно связи между определенными типами аргументов (в первом случае тип результата связан с возвращаемым типом обратного вызова). ). Обучение TypeScript о таких отношениях также может быть предметом дальнейших ограничений, которые затем устанавливаются TypeScript.

Хотя универсальные шаблоны просты в использовании вместе с интерфейсами, типами, классами и стандартными функциями, они могут показаться не такими доступными для функций со стрелками. Эти функции являются анонимными по определению (их необходимо назначить переменной, доступ к которой осуществляется через имя).

Как правило, мы можем придерживаться этого подхода: просто подумайте о нормальном, но анонимном объявлении функции. Здесь только имя ушло. Таким образом, <T> естественно помещается перед круглыми скобками. Мы заканчиваем с:

 const getOrUpdateFromCache = <T>(key: string, cb: () => T) => /* ...*/; 

Однако, как только мы введем это в файл TSX (по любой причине), мы получим ошибку ERROR: unclosed T tag . Это та же проблема, что и с приведениями (решается там с помощью оператора as ). Теперь наш обходной путь заключается в явном указании TypeScript, что синтаксис предназначен для использования обобщений:

 const getOrUpdateFromCache = <T extends {}>(key: string, cb: () => T) => /* ...*/; 

Совет по TypeScript 7: внесите устаревший код

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

Лучшая альтернатива — просто использовать allowJs в файле tsconfig.json , рядом с обычными (довольно сильными) параметрами:

 { "compilerOptions": { "allowJs": true, // ... } } 

Теперь вместо того, чтобы уже переименовывать существующие файлы из .js в .ts , мы сохраняем существующие файлы как можно дольше. Мы будем переименовывать только в том случае, если будем серьезно заниматься содержимым таким образом, чтобы код полностью преобразовывался из JavaScript в вариант TypeScript, который удовлетворяет нашим настройкам.

Совет по TypeScript 8. Создание функций со свойствами

Мы уже знаем, что использование интерфейсов для объявления формы функции является разумным способом. Кроме того, этот подход позволяет нам прикрепить некоторые свойства к данному типу функции. Давайте сначала посмотрим, как это может выглядеть на практике:

 interface PluginLoader { (): void; version: string; } 

Определить это просто, но, к сожалению, работать с ним нет. Давайте попробуем использовать этот интерфейс по назначению, создав объект, который выполняет интерфейс:

 const pl: PluginLoader = () => {}; pl.version = '1.0.0'; 

 interface PluginLoaderLight { (): void; version?: string; } const pl: PluginLoaderLight = () => {}; pl.version = '1.0.0'; 

 const pl = <PluginLoader>(() => {}); pl.version = '1.0.0'; 

 const pl = (() => {}) as PluginLoader; pl.version = '1.0.0'; 

 interface AbstractControllerMap { user: UserControllerBase; data: DataControllerBase; settings: SettingsControllerBase; //... } 

 function actOnAbstractController(controllerName: string) { // ... } 

 function actOnAbstractController(controllerName: 'user' | 'data' | 'settings') { // ... } 

 type ControllerNames = keyof AbstractControllerMap; 

 function actOnAbstractController(controllerName: ControllerNames) { // ... } 

 interface MyEventEmitter { on(eventName: string, cb: (e: any) => void): void; off(eventName: string, cb: (e: any) => void): void; emit(eventName: string, event: any): void; } 

 interface AllEvents { click: any; hover: any; // ... } type AllEventNames = keyof AllEvents; 

 interface MyEventEmitter { on(eventName: AllEventNames, cb: (e: any) => void): void; off(eventName: AllEventNames, cb: (e: any) => void): void; emit(eventName: AllEventNames, event: any): void; } 

 interface MyEventEmitter { on<T extends AllEventNames>(eventName: T, cb: (e: any) => void): void; off<T extends AllEventNames>(eventName: T, cb: (e: any) => void): void; emit<T extends AllEventNames>(eventName: T, event: any): void; } 

 interface MyEventEmitter { on<T extends AllEventNames>(eventName: T, cb: (e: AllEvents[T]) => void): void; off<T extends AllEventNames>(eventName: T, cb: (e: AllEvents[T]) => void): void; emit<T extends AllEventNames>(eventName: T, event: AllEvents[T]): void; } 

 interface ClickEvent { leftButton: boolean; rightButton: boolean; } interface AllEvents { click: ClickEvent; // ... } 

 interface AllEvents { custom: { field: string; }; }