Запись React — написана с использованием элементов TS React (1)

React.js

Введение: TypeScript — это бесплатный язык программирования с открытым исходным кодом, разработанный Microsoft. Это строгий надмножество JavaScript, добавляющее необязательную статическую типизацию и манипулирование Prototype с использованием того, что выглядит как синтаксис объектно-ориентированного программирования на основе классов. Поэтому мы можем писать javascript-приложения таким же образом, как писать на строго типизированных языках (java, dart).

Теперь все виды интерфейсных проектов поддерживают ts, ниже показано, когда ts используется в реакции. Как использовать различные компоненты. Записывайте и делитесь со всеми.

Компоненты класса (компоненты веб-компонентов)

Вы можете написать TSX WebComponent следующим образом. Этот компонент сможет ограничить реквизиты, которые мы передаем в компонент без использования библиотеки обнаружения типа SPEP-типов, и компилятор может быть чрезвычайно дружелюбным и четко подсказнете принятый тип и тип компонента, который мы пишем. Метод и т. Д.

type IPrps = {
  message: string;
};

type IState = {
  count: number; 
};

class App extends React.Component<IPrps, IState> {
  state: IState = {
    count: 0
  };
  
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

Официальный сайт React определяет тип компонента следующим образом.

    interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }

Через файл определения мы можем написать наш компонент следующим образом:

Компонент принимает общие классы P & S & SS, после получения P компонент будет выводиться какReadonly<{ children?: ReactNode }> & Readonly<P>Кросс-тип и защита только для чтения для типа props, нам не нужно объявлять дочерние элементы в Props, и нам не нужно добавлять флаг Readonly, потому что они автоматические.

Функциональные компоненты

Функциональные компоненты также не нарушают принцип открытого-закрытого, поэтому мы можем использовать функциональные компоненты так же, как написание функции для ограничения типов параметров. tsx-версию функционального компонента можно записать следующими способами:

type IProps = {
    onPress: () => void;
    iconStyle?: any;
    url: string,
};

const TouchIcon: React.FC<IProps> = (props: IProps) => {
    return (
        <div onClick={props.onPress}>
            <p>{props.url}</p>
            <p>{props.iconStyle}</p>
        </div>
    );
};

React.FC — это сокращение от React.FunctionComponent, и нет никакой разницы в использовании и определении типа.

Кроме того, компоненты React.FC будут автоматически выполнять завершение типов для своих статических свойств, таких как displayName, propTypes, defaultProps и т. д., на этапе компиляции.

Реагировать на компоненты SFC

react-native 在 0.59 release 版本后才支持 Hooks

крючки компонент

Мы можем написать версию TSX Code Code следующим образом:


export type RecordItem = {
    title: string;
    total: number;
    id: number;
    color: string;
};

export const recordList: RecordItem[] = [
    {
        id: 1,
        total: 1500,
        title: "总完成课时",
        color: "rgb(20,125,255)",
    }, {
        id: 2,
        total: 30,
        title: "总完成课时",
        color: "rgb(255,96,96)",
    }
];

export const RecordWidget: React.SFC = () => {

    const [list, setList] = React.useState<RecordItem[]>(recordList);

    return ( 
        <>
            {
                list.map((item: RecordItem) => {
                    return (
                        <View style={{ backgroundColor: item.color }}>
                            <Text>{item.title}</Text>
                            <Text>{item.total}</Text>
                            <Text>{item.title}</Text>
                        </View>
                    );
                })
            }
        </>
    );
};

Если вам нужно использовать значение по умолчанию, вы можете передать
const [list, setList] = React.useState<RecordItem[] | [] | null>(recordList);установить исключение по умолчанию.

useRef

    const ref = useRef<HTMLElement | null>(null);

useReducer

type AuthState = {};
type Action =
  | { type: "FETCH_SUCCESS"; payload: any }
  | { type: "FETCH_ERROR"; payload: string };

export function reducer(state: AuthState, action: Action): AuthState {
  switch (action.type) {
    case "FETCH_SUCCESS":
      return {
        ...state,
        one: action.payload
      };
    case "FETCH_ERROR":
      return {
        ...state,
        two: action.payload
      };
    default:
      return state;
  }
}

обработка событий

При определении различных событий в React с помощью ts мы можем определять разные типы событий в соответствии с бизнес-сценариями для статической проверки кода.

Например, событие отправки формы:

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
  }}
</form>

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

В зависимости от бизнеса нам нужно выбирать разные типы событий для обработки разных бизнес-сценариев.Ниже приведен список нескольких распространенных событий.

Описание события тип события универсальный тип
Синтетическое событие SyntheticEvent null
Изменить событие ChangeEvent <T = Element>
событие буфера обмена ClipboardEvent <T = Element>
событие перетаскивания DragEvent <T = Element>
событие клавиатуры KeyboardEvent <T = Element>
событие мыши MouseEvent <T = Element>
сенсорное событие TouchEvent <T = Element>
колесо событие WheelEvent <T = Element>
анимационное событие AnimationEvent <T = Element>
переходное событие TransitionEvent <T = Element>

Tips: React SyntheticEvent(合成事件)对象会被重用，为了性能原因，如果需要异步访问该事件对象，可以通过调用 event.persist() 来获取事件对象。

Redux

Существует много способов и различных универсальных версий для вывода и защиты типа ts-версии действия. Ниже приведен метод, который я использую в проекте для справки.

redux action 被设计为描述事件动作，并可以承接动作数据的载体（payload），下面是 redux 定义的 action 类型

В реальных бизнес-сценариях нам иногда необходимо ограничить переносчик полезных нагрузок, которые могут быть выполнены следующими способами:

import { Action as ReduxAction } from 'redux';

export interface Action<T extends string, P = any> extends ReduxAction<T> {
    payload?: P;
}

Пользовательское действие интерфейса Наследуется от REDUXAction, расширяет свойство PayLoad. Способ применения следующий:

На данный момент мы определили действие в сенате, а также тип возврата. Поскольку полезная нагрузка является необязательным атрибутом. Поэтому, когда нет входящей несущей полезной нагрузки, нужно только определить:

Вышеупомянутый метод просто определяет тип действия.Когда в нашем бизнесе нужно выполнить много запросов и взаимодействий, может быть несколько действий. Вы также можете определить функцию для генерации Action, эта функция называется Action Creator.

Что касается создателя действия, который может использовать перегрузку функции для реализации поддержки действия объекта и полезной нагрузки, создатель действия определяется следующим образом:

export function createAction<T extends string>(type: T): Action<T, void>;
export function createAction<T extends string, P>(
    type: T,
    payload: P
): Action<T, P>;
export function createAction<T extends string, P>(type: T, payload?: P) {
    return typeof payload === 'undefined' ? { type } : { type, payload };
}

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

上面是对于 redux action 动作的校验及推导的二种方式，有更多简单的方法，以上仅供参考

Получить все типы действий

既然对 action 进行约束，我们需要在代码上获取到当前所有的 action 种类。通常我们会在 store 仓库中新建 action 目录，在里面存放所有的 action 并在 index 中进行导出。 так:

Поскольку мы договорились определить все действия в папке action/, мы можем получить все типы действий следующим образом:

import * as actions from "@action/index";

type AllActions = keyof typeof actions[keyof typeof actions];

Получить все типы состояния редукции

Просто определите тип для получения всех типов состояния, например:

export type AllState =
    keyof AuthState | keyof CommonState |
    keyof ComFetchState | keyof ComNetworkState |
    keyof OperationState;

Спасибо за чтение~

Категории