Готовы ли вы вывести свои навыки React и TypeScript на новый уровень? Не смотрите дальше! В этой статье мы рассмотрим некоторые передовые методы, которые помогут вам создавать более мощные и масштабируемые приложения с помощью этих мощных технологий.
1. Строго типизированный редукс с TypeScript
Одним из ключевых преимуществ использования TypeScript с React является возможность определять сильные типы для вашего хранилища и действий. Это может помочь выявить ошибки и сделать ваш код более удобным в сопровождении в долгосрочной перспективе.
Вот пример того, как вы можете определить строго типизированный редьюсер и генераторы действий в TypeScript:
import { Action, ActionCreator, Reducer } from "redux"
// Define the action types as constants
export const INCREMENT = "INCREMENT"
export const DECREMENT = "DECREMENT"
// Define the action interfaces
interface IncrementAction extends Action {
type: typeof INCREMENT
}
interface DecrementAction extends Action {
type: typeof DECREMENT
}
// Define the combined action type
type CounterAction = IncrementAction | DecrementAction
// Define the action creators
export const increment: ActionCreator<IncrementAction> = () => ({
type: INCREMENT
})
export const decrement: ActionCreator<DecrementAction> = () => ({
type: DECREMENT
})
// Define the initial state
export interface CounterState {
count: number
}
const initialState: CounterState = {
count: 0
}
// Define the reducer
export const counterReducer: Reducer<CounterState, CounterAction> = (
state = initialState,
action
) => {
switch (action.type) {
case INCREMENT:
return { ...state, count: state.count + 1 }
case DECREMENT:
return { ...state, count: state.count - 1 }
default:
return state
}
}
2. Асинхронные действия с redux-thunk и TypeScript
Иногда вам нужно выполнять асинхронные операции в ваших избыточных действиях, например, извлекать данные из API. Вот тут-то и пригодится redux-thunk. Это позволяет вам писать создатели действий, которые возвращают функции вместо простых объектов, которые могут отправлять несколько действий и выполнять асинхронную логику.
Вот пример того, как вы можете использовать redux-thunk с TypeScript для получения данных из API и обновления хранилища:
import { ActionCreator, Dispatch } from "redux"
import { ThunkAction } from "redux-thunk"
import { getData } from "./api"
// Define the action types as constants
export const REQUEST_DATA = "REQUEST_DATA"
export const RECEIVE_DATA = "RECEIVE_DATA"
export const RECEIVE_ERROR = "RECEIVE_ERROR"
// Define the action interfaces
interface RequestDataAction extends Action {
type: typeof REQUEST_DATA
}
interface ReceiveDataAction extends Action {
type: typeof RECEIVE_DATA
data: any
}
interface ReceiveErrorAction extends Action {
type: typeof RECEIVE_ERROR
error
3. Рендеринг реквизита с помощью TypeScript
Рендеринг реквизита — это техника в React, при которой компонент визуализирует реквизит, который является функцией. Это может быть полезно для совместного использования логики между компонентами без необходимости использования компонентов более высокого порядка (HOC) или сверления реквизита.
Вот пример того, как вы можете использовать параметры рендеринга с TypeScript:
import React from "react"
interface MouseProps {
render: (state: { x: number, y: number }) => React.ReactNode
}
class Mouse extends React.Component<MouseProps> {
state = { x: 0, y: 0 }
handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: "100vh" }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
)
}
}
const App = () => (
<Mouse
render={({ x, y }) => (
<h1>The mouse position is ({x}, {y})</h1>
)}
/>
)
4. Компоненты высшего порядка (HOC) с TypeScript
Компоненты высшего порядка (HOC) — это функции, которые принимают компонент и возвращают новый компонент с дополнительными функциями. Они могут быть полезны для абстрагирования общей логики или внедрения свойств в компонент.
Вот пример того, как вы можете использовать HOC с TypeScript для добавления простого индикатора загрузки к компоненту:
import React from "react"
interface InjectedProps {
isLoading: boolean
}
const withLoadingIndicator = <P extends object>(
WrappedComponent: React.ComponentType<P>
) => {
type Props = P & InjectedProps
class WithLoadingIndicator extends React.Component<Props> {
render() {
const { isLoading, ...rest } = this.props as InjectedProps
if (isLoading) {
return <h1>Loading...</h1>
}
return <WrappedComponent {...rest as P} />
}
}
return WithLoadingIndicator
}
interface DataProps {
data: any
}
const DataComponent = (props: DataProps) => <h1>{props.data}</h1>
const EnhancedDataComponent = withLoadingIndicator(DataComponent)
const App = () => (
<EnhancedDataComponent data={"Hello World"} isLoading={false} />
)
5. Декораторы TypeScript
Декораторы — это функция TypeScript, которая позволяет аннотировать и изменять классы и их элементы. Они могут быть полезны для добавления дополнительных функций или метаданных в ваш код.
6. TypeScript и React Hooks
React Hooks — это функция в React, которая позволяет вам использовать состояние и другие функции React без написания компонента класса. Их можно использовать с TypeScript, аннотируя типы переменных ловушек.
Вот пример того, как вы можете использовать хук useState с TypeScript:
import React, { useState } from "react"
interface FormState {
name: string
email: string
}
const Form = () => {
const [formState, setFormState] = useState<FormState>({
name: "",
email: ""
})
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target
setFormState({ ...formState, [name]: value })
}
return (
<form>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={formState.name}
onChange={handleChange}
/>
<br />
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formState.email}
onChange={handleChange}
/>
</form>
)
}
Вот и все, 6 передовых методов совместного использования React и TypeScript для создания мощных и масштабируемых приложений. Являетесь ли вы опытным профессионалом или новичком в этих технологиях, мы надеемся, что вы узнали что-то новое и сможете эффективно использовать эти методы в своих собственных проектах. Удачного кодирования!