«Пуленепробиваемый фронтенд: разработка под React на TypeScript», Станислав Панферов, MoscowJS 21

1. Пуленепробиваемый
фронтенд
Станислав Панферов

2. Рассказывает
Рассказывает Станислав Панферов
Специализация Tech Lead
Чем занимается Разработка фронта и бекенда
Сейчас работаю Альфа Лаборатория
До этого работал NPTV
Опыт Более 7 лет
2

3. План доклада
1. Когда нужна и когда не нужна типизация
2. Типизация компонент ReactJS
3. Типизация и Flux
4. Инструменты сборки
3

4. 4
Когда плюсы не очевидны?
➔ У вас в команде 2 - 3 человека
➔ Вы удерживаете в голове весь код проекта и
основные зависимости
➔ Вы больше пишете, чем читаете и изменяете
➔ Покрытие кода юнит-тестами превышает 80%

5. 5
Когда нужна типизация?
➔ Команда из четырех и более человек
➔ Вы не можете удержать в голове весь код проекта
➔ Вы много рефакторите и читаете код
➔ Покрытие кода юнит-тестами менее 80%

6. 6
Почему React легко типизировать?
➔ Понятные точки типизации (props и state)
➔ Нет строковых шаблонов, только JavaScript
➔ Стандартная обвязка: ES6 Classes + ES6 Modules
Typed state
Component
Typed props Typed callbacks

7. export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior,
this.props.size
);
return dom.a({className: cssClass}, this.props.children);
}
}
export var Link = React.createFactory(LinkClass);
7

8. export class LinkClass extends React.Component {
render() {
var cssClass = cx('link'
this.props.behavior, // 'normal', 'large'
this.props.size // 'navigate', 'control'
);
return dom.a({className: cssClass}, this.props.children);
}
}
export var Link = React.createFactory(LinkClass);
8

9. 9
Link({}) // behavior обязательный
Link({
size : 'big', // значение не из допустимого набора
behavior : 'cotrol' // значение написано с ошибкой
})

10. propTypes: {
size: React.PropTypes.oneOf([
'normal',
'large'
]),
behavior: React.PropTypes.oneOf([
'navigate',
'control'
]).isRequired
}
10

11. 11
Минусы propTypes:
1. Проверки типов осуществляются в runtime
2. Невозможно выразить контракты на функции
3. Проверяются только в development окружении
4. Нельзя типизировать бизнес-логику

12. ReactJS ♡ TypeScript
12
1. Напишем типы для полей Props и State
2. Напишем интерфейсы для Props и State
3. Укажем типы в компоненте

13. export enum LinkSize {
Normal = <any>'normal',
Large = <any>'large'
}
export enum LinkBehavior {
Navigate = <any>'navigate',
Control = <any>'control'
}
13
Перечисления:
1. Документируют
значения
2. Позволяют проверять
значения из набора при
компиляции
Типы для полей

14. export interface LinkProps extends React.HTMLAttributes {
size?: LinkSize;
behavior: LinkBehavior;
}
export interface LinkState { }
14
Интерфейсы:
1. Документируют
структуру объектов.
2. Позволяют проверять
структуру объектов при
компиляции.
Интерфейсы для Props и State

15. export class LinkClass extends React.Component<LinkProps, LinkState> {
/* the same ... */
}
15
Типы в компоненте

16. 16
Link({})
> Argument of type '{}' is not assignable to parameter of type '{ size?:
LinkSize; behavior: LinkBehavior; }'. Property 'behavior' is missing in type
'{}'.
Link({
size : LinkSize.Big,
behavior : LinkBehavior.Cotrol
})
> Property 'Big' does not exist on type 'typeof LinkSize'.

17. 17
Выводы
➔ TypeScript позволяет типизировать компоненты
➔ Проверки осуществляются в compile time
➔ Типизировать не сложно
➔ Система типов позволяет проверять больше

18. 18
JSX в разработке
#2673

19. А что с Flux?
19

20. ➔ Используем канонический Flux от
➔ Пишем с расчетом на типизацию
20

21. export class Navigate extends Action {
constructor(public route: Route) { super() }
}
dispatcher.dispatch(new Navigate(route))
class AppStore extends Store {
dispatch(action: Action) {
if (action instanceof Navigate) { /* .. */ }
}
}
21
1. Action — общий
интерфейс для всех
событий.
2. События делаем
классами.
3. В сторах используем
instanceof для
автоматического
приведения типов.

22. Выводы
➔ TypeScript для UI и бизнес-логики
➔ Больше контекста и документации
➔ Быстрое обнаружение ошибок
➔ Чтение, отладка и рефакторинг — быстрее
➔ Интеграция с IDE
22

23. Инструментарий
23
http://bit.ly/react_typescript

24. Спасибо!
C вами был Станислав Панферов
24