Безжалостная типизация

Фронтендер в Контур.Гособлако

Люблю ходить в горы

В прошлом бэкендер

Контур.Гособлако

• «Стартап»
• Работа ведётся в сжатые
• Требование — делать быстро и хорошо
• Переобуваемся на лету

    о

сраки

• Модульная учётная система
• Цель — захватить мир рынок госов
• Старт проекта — январь 2017
• 8 бэкендеров, 1 фронтендер

Почему выбрали типизацию

Что хотели получить от типизации

• Сделать код надежнее
• Упростить рефакторинг
• Избежать детских проблем в JS

Проблемы в JS

1. Опечатки

case 'SEARCH_PAGE_UPDATE_RESLUTS'

action.payload.qeury

chengeQueryText()

// ловим ошибки в рантайме
// или пишем много тупых тестов

2. Неизвестные параметры событий

// какие параметры принимает onSearch?

onSearch(query)

onSearch({query})

onSearch(() => {...})

3. Непредсказуемые входные параметры

// что прийдёт в «options»?

const onSearch = (options) => {   
    // options.query? 
    ...
}

4. Проблемы после обновления npm пакетов

import Input from 'ui/Input';

<Input
  size="large"
  width={600}
  value={props.query}
  onUpdate={props.onUpdate} 
  ...
/>

// поменялось имя свойства onUpdate → onChange

5. Нет IntelliSense

Решение — типизировать

• Опечатки
• Неизвестные параметры событий
• Непредсказуемые входные параметры
• Проблемы после обновления npm пакетов
• Нет IntelliSense

Мы выбрали TypeScript

TypeScript

• Язык со статической типизацией
• Компилируется в JS (ES3, ES5, ES6)
• Понятен для бэкендеров*
• Динамично развивается c 2012
• Отличная поддержка в IDE

TypeScript

JS

React

Redux

Действия

Состояние

Компоненты

Events

State

Redux Flow

Actions

Есть один нюанс

Печально когда нет типизации

1. Неизвестные параметры в props

const SearchPage = (props) => (  
  <SearchBar
    // что такое props.onSearch?
    // какие параметры принимает
    onSearch={props.onSearch}
  />
  ...
);

2. Непонятно что принимает reducer

const reducer = (
  previousState, // ← что здесь?
  action // ← а здесь?
) => {
  ...
};

3. Что передается в action

const reducer = (
  previousState,
  action
) => {
  switch (action.type) {        
   сase 'SEARCH_PAGE_UPDATE_RESULTS':
     return {
        ...state,
        // а точно ли query?
        query: action.query 
     }
   ...

4. Константы action.type

const reducer = (
  previousState,
  action
) => {
  switch (action.type) {        
   // какие значения 
   // может принимать action.type?
   сase 'SEARCH_PAGE_UPDATE_RESULTS':
   сase Constants.SEARCH_PAGE_CHANGE_QUERY:
     ...
  }
};

5. Непонятно что в app state

const rootReducer = combineReducers({ 
    searchPageReducer,
    authReducer,
    ... 
});

// из чего состоит state приложения
// из каких редьюсеров

Что будем делать?

1. Будем жить с этим
2. Затипизируем

Затипизируем

Инструменты

• TypeScript 2.6.2
• React 16.2.0
• Redux 4.0.0-beta.1

Подготовка файлов

• js → ts
• jsx → tsx
• tsconfig.json
• babel-loader → ts-loader

Чуть-чуть теории

TypeScript basic types

• Boolean, Number, String, Array
• Tuple, Enum, Any, Void, Null, Undefined, Never

let isDone: boolean;
let query: string;
let onSearch: (query: string) => void;
let list: any[] = [1, true, 'free'];

TypeScript advanced types

• Union Types
  • number | string | null
• String Literal Types
  • 'SEARCH_PAGE_CHANGE_QUERY'
• Type Aliases

  • type fn = () => void;

TypeScript interfaces

interface Action {
  type: string;
  payload: any;
}

// пример
const anyAction: Action = {
  type: 'ANY_ACTION',
  payload: 0
}

TypeScript generics

interface Action<T> {
  type: string;
  payload: T;
}

// пример
const numberAction: Action<number> = {
  type: 'NUMBER_ACTION',
  payload: 0
}

Redux v4 подружился с Generic Types

interface Action<T = any> {
  type: T;
}

type Reducer<
    S = any, 
    A extends Action = AnyAction
> = (state: S | undefined, action: A) => S;

...

redux/index.d.ts

План типизации

• Events
  • ​параметры функций
  • component props
• Actions
  • action.​type
  • action.​payload
• State
  • app state
  • ​reducer state
  • selectors
  • action types, action.payload

Events & Props

interface Props {
  query: string;
  onSearch: (options: SearchParams) => void;
}

const SearchPage: React.SFC<Props> = props => (  
  <SearchBar
    query={props.query}
    onSearch={props.onSearch}
  />
)
            

Типизируем props в компонентах

Автокомплит props в компонентах

interface Actions {
  onSearch: (options: SearchParams) => void;
}

const searchPageActions: Actions = {
  onSearch: searchRequest
};

const SearchContainer = connect(
  searchPageSelector, 
  searchPageActions
)(SearchPage);

// connect - связывает React и Redux

Типизируем события в connect

Что получили

• Зафиксированный контракт  
• Понятно что в props
• Автокомплит props в компонентах
• «Упадём» если контракт изменится

План типизации

• Events
  • ​параметры функций
  • component props
• Actions
  • action.​type
  • action.​payload
• State
  • app state
  • ​reducer state
  • selectors
  • action types, action.payload

Actions

Action

interface Action<TPayload, Type> {
  readonly type: Type;
  payload: TPayload;
//error: boolean;
//meta: any;
}

type

payload

payload

Объект Action

github.com/acdlite/flux-standard-action

Версия без типизации

const SEARCH_PAGE_REQUEST = 'SEARCH_PAGE_REQUEST';

const searchRequest = (options) => ({
  type: SEARCH_PAGE_REQUEST,
  payload: {
    ...options
  }
});

Первое приближение с типами

interface SearchRequestPayload {
  query: string;
}

type SearchRequestAction = Action<
  SearchRequestPayload,
  'SEARCH_PAGE_REQUEST'
>;

const SEARCH_PAGE_REQUEST = 'SEARCH_PAGE_REQUEST';

const searchRequest = (
  options: SearchRequestPayload
): SearchRequestAction => ({
  type: SEARCH_PAGE_REQUEST,
  payload: {
    ...options
  }
});

Тыж программист

function actionCreator<
  T extends Action<any, string>
>(Ctor: { new (payload: T['payload']): T }) {
  return (payload: T['payload']): T 
            => new Ctor(payload);
}

// Возвращает Action через конструктор Ctor

Функция помощник actionCreator

Функция помощник actionType

function actionType<Payload, Type>(type: Type) {
  return class implements Action<Payload, Type> {
    static readonly Type = type;
    public readonly type = type;
    constructor(public payload: Payload) {
      return {
        payload,
        type
      };
    }
  };
}

// Возвращает Action из конструктора
// Хранит константу action.type в Type

Пример использования

class SearchRequest extends actionType<
  { query: string },
  'SEARCH_PAGE_REQUEST'
>('SEARCH_PAGE_REQUEST') {}

const searchRequest = actionCreator(SearchRequest);

Что получили

• Конструктор действий → { type, payload }
• Вывод типа payload для каждого action.type

План типизации

• Events
  • ​параметры функций
  • component props
• Actions
  • action.​type
  • action.​payload
• State
  • app state
  • ​reducer state
  • selectors
  • action types, action.payload

State

const rootReducer = combineReducers<
  AppState,
  AppActions
>({ searchPageReducer, authReducer });


interface AppState {
  searchPageReducer: SearchPageState;
  authReducer: AuthState;
}

type AppActions = SearchPageActions | AuthActions;

Затипизируем rootReducer

Типизируем reducer state

interface State {
  readonly query: string;
  readonly searchResult: SearchResult;
}

const searchPageReducer = (
  previousState: State,
  action
): State => {
  ...
};

Типизируем reducer state selector

const getState = (
  state: State, 
  ownProps: OwnProps
): State => ({
  ...state,
  ...ownProps
});

Типизируем action types

const searchPageReducer = (
  previousState: State,
  action: AppActions
): State => {
  switch (action.type) {
    ...
  }
};

Автокомплит action types

Типизированный action.payload

Вывод типов action.payload

Что получили

План типизации

• Events
  • ​параметры функций
  • component props
• Actions
  • action.​type
  • action.​payload
• State
  • app state
  • ​reducer state
  • selectors
  • action types, action.payload

Бонусы

• не нужно тестировать props
• можно затипизировать css свойства

Автокомплит css свойств

Ещё бонусы

• можете получать больше всех $ в UK

Сколько стоит?

1. Нужно разбираться в типах

function actionCreator<
  T extends Action<any, string>
>(Ctor: { new (payload: T['payload']): T }) {
  return (payload: T['payload']): T => new Ctor(payload);
}

interface Action<TPayload, Type> {
  readonly type: Type;
  payload: TPayload;
  meta: any;
  error: boolean;
}

2. Проблемы обновления npm пакетов

• Пакет обновился, а d.ts нет
• Ошибки в d.ts файлах

3. Увеличивается время разработки

• Нужно писать контракты

• Требуется время на компиляцию

Когда применять

• Система будет часто изменяться
• Требуется высокое качество + скорость
• В крупных системах

Anders Hejlsberg@Build2016:

Big JavaScript codebases tend to become "read-only".

Создатель: Turbo Pascal, Delphi, C#, Typescript

Call to Action

• Начните писать типы
• Внесите вклад в типизацию

TS

А что с FLOW ?

TypeScript vs Flow 2017/18

npmtrends.com/typescript-vs-flow-bin

1. Перевод четверть миллиона строк кода на typescript
2. github.com/piotrwitek
3. github.com/niieani/typescript-vs-flowtype
4. djcordhose.github.io/flow-vs-typescript

TypeScript

• Компилятор
• Нужно писать типы
• Умеет в ES3, ES5, ES6
• Инструменты ООП и ФП
• Экспериментальные фичи из коробки 

Flow

• Анализатор
• Можно не писать типы
• Создан для легаси

Синхронизация моделей DTO 

Web API

CLIENT

models.d.ts

• Автогенерация контрактов с backend

• Model.cs → interface Model { ... }

Model.cs → interface Model { ... }

public class AddressFullObjectM
{
    public AddressM address { get; set; }
    public string postalCode { get; set; }
    public HouseM house { get; set; } 
    public string building { get; set; }
    public string room { get; set; }
}

interface AddressFullObjectM {
  address: server.AddressM;
  building: string;
  house: server.HouseM;
  postalCode: string;
  room: string;
}

AddressFullObjectM.cs

AddressFullObjectM.d.ts

Контакты

shatikhin@skbkontur.ru

github.com/mshatikhin/typescript-react-redux-app

2018

Михаил Шатихин

Пример типизации:

t.me/@mshatikhin