Статическая типизация в React приложении

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

Почему React? По состоянию на сегодняшний день эта библиотека бесспорно доминирует на фоне конкурентов. Вокруг React образовалось самое большое сообщество разработчиков в мире. Каждый третий SPA написан на данной платформе. Также есть множество отличных проектов, связанных с использованием React Native, платформы для iOS, UWP и Android приложений, основанной на React.js.

Поэтому сегодня мы взглянем на возможности, которые дает интеграция двух суперпопулярных инструментов: TypeScript и React.

Примеры

Для начала разберемся, какие типы мы можем использовать для React.
Начнем с простого и добавим типы в Functional Component.

import * as React from 'react';   const HelloWorld: React.FunctionComponent<{   name: string; }> = ({ name = 'World' }) => {   return <div>Hello, {props.name}</div>; };   export default HelloWorld;

Для Functional Component или Statless Component мы должны использовать определение типа React.FunctionComponent. Так же мы можем определить типы для аргумента props — полей, которые компоненту передает родитель. В данном случае props может содержать только поле name с типом string.

Все это выглядит не сложно. А что насчет компонентов классов?

import * as React from 'react';   interface State {   name: string; }   interface Props {}   class HelloWorld extends React.Component<Props, State> {   state = {     name: 'World'   }      setName(name: string) {     this.setState({ name });   }      redner() {     return (       <React.Fragment>         <hI>Hello, {this.state.name}</hI>         <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} />       </React.Fragment>     );   } }

В примере с классом мы создали два интерфейса: Props и State. С их помощью мы определили сигнатуры входящих пропсов (пустые) и сигнатуру состояния компонента — как в примере с Functional Components.

Так же мы можем добавить значения пропсов по умолчанию.

import * as React from 'react';   interface Props {   name?: string; }   export default class HelloWorld extends React.Component<Props> {   static defaultProps: Props = {     name: 'World'   };     render () {     return <hI>Hello, {this.props.name}</hI>;   } }

Вот и все! Наше маленькое React приложение уже строго типизировано на уровне параметров и значений состояния компонента.

Давайте разберем примущества, которые это нам дало:

• на этапе компиляции мы увидим все несоответствия типов;
• правильно настроенный редактор поможет нам избежать ошибок еще на этапе разработки, просто подсвечивая несхождения сигнатур или типов данных;
• документация из интерфейсов и определений типов.

Enum в параметрах

Enum — это перечисляемый тип данных. Если мы добавим этот тип к переменной или полю интерфейса, то значением этого поля или переменной могут быть только определенные значения в Enum.
Например.

 import * as React from 'react';   enum Colors {   RED,   BLUE,   GREEN }   const ColorResult: React.FunctionComponent<{   color: Colors; }> = ({ color = Colors.Red }) => {   return <div>Your color is {props.color}</div>; };   export default ColorResult;

В уже знакомом нам Functional Component мы хотим показать выбранный пользователем цвет. В типе enum Colors мы указали все возможные варианты цвета, которые могут передаваться в компонент. Если компилятор TypeScript увидит где то несоответствие по типам, он покажет вам это, выдав ошибку.

Строгий Redux

В 2019 мы все еще имеем много приложений, работающих на Redux. TypeScript может помочь в данной ситуации.

import * as React from 'react';   const initialState = { name: 'World' }; type HelloWorldStateProps = Readonly<typeof initialState>;   interface Action { 	type: string;   name?: string; }   const worldNameReducer = ( 	state: HelloWorldStateProps = initialState, 	action: Action ): HelloWorldStateProps => { 	switch (action.type) { 		case "SET": 			return { name: action.name }; 		case "CLEAR": 			return { name: initialState.name }; 		default: 			return state; 	} };   const set = (name): Action => ({ type: "SET", name }); const clear = (): Action => ({ type: "CLEAR" });   const store = createStore( 	combineReducers({ 		world: worldNameReducer 	}) );   type StateProps = ReturnType<typeof mapStateToProps>; type DispatchProps = typeof mapDispatchToProps;   interface AppProps extends StateProps, DispatchProps {} interface AppState extends StateProps {}   class App extends React.Component<AppProps, AppState> {   state = {     name: initialState.name   }      setName(name: string) {     this.setState({ name });   }   	render() { 		const { set, clear, name } = this.props; 		return ( 			<div> 				<hI>Hello, {name}</hI>         <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} />                  <button onClick={() => set(this.state.name)}>Save Name</button>         <button onClick={() => clear()}>Clear</button> 			</div> 		); 	} }   const mapStateToProps = ({ world }: { world: HelloWorldStateProps }) => ({ 	name: world.name, });   const mapDispatchToProps = { set, clear };   const AppContainer = connect( 	mapStateToProps, 	mapDispatchToProps )(App);   render( 	<Provider store={store}> 		<AppContainer /> 	</Provider>, 	document.getElementById("root") );

В данном примере мы добавляем типы в приложение сразу на несколько уровней. В первую очередь, это сами редьюсеры. На вход редьюсер принимает Action, а возвращать он должен всегда объект соответствующий типу HelloWorldStateProps. Учитывая какое количество редьюсеров бывает в современном приложении, это очень полезное нововведение. Так же каждый action у нас имеет строгую сигнатуру Action.

Следующий уровень типизации — компонент. Здесь мы применили наследование типов для AppProps и AppState. Зачем писать больше, когда у нас уже есть типы данных с такими сигнатурами? Так и поддерживать систему проще. Если вы поменяете некоторые элементы, изменения произойдут по всем наследникам.

Заключение

TypeScript — действительно полезный язык, работающий поверх JavaScript. В связке с React он дает действительно впечатляющие практики программирования Frontend приложений.