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' // значение написано с ошибкой
})
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
➔ Типизировать не сложно
➔ Система типов позволяет проверять больше
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