Typescript в сочетании с практиками React

TypeScript React.js

Статья впервые опубликована на:GitHub.com/US TB-Вуд, умри, о ты…

написать впереди

Typescript — это надмножество JavaScript, которое в основном обеспечивает систему типов и поддержку es6. Я использую ts для написания реакции почти 3 месяца, и я наступил на много ям посередине.С самого начала я чувствовал, что ts не нужен, и теперь я чувствую, что ts действительно ароматен. Вот краткое изложение опыта использования ts для написания react.

Эта статья будет заключаться из следующих разделов:

  1. Преимущества машинописного текста
  2. TS в сочетании с React
  3. Суммировать
  4. Ссылки и расширенное чтение

Преимущества машинописного текста

1. Помогает лучше рефакторить код

Хорошая привычка программиста — часто делать небольшой рефакторинг собственного кода, чтобы сделать его более удобным в сопровождении. Однако для многих кодов, работающих онлайн, покрытие кода тестами часто не очень велико, и иногда даже изменение имени переменной влияет на все тело. Для проектов, написанных на ts, такой проблемы нет. Функция статической проверки ts поможет найти неправильную часть кода.

2. Подсказки таких IDE, как vscode, более интеллектуальны.

js — динамический слабо типизированный язык интерпретации, тип можно изменить после объявления переменной, а тип нужно определять во время выполнения. Сообщение об ошибке ts появляется во время компиляции, а не во время выполнения. Таким образом, использование проверки статического типа и других функций, предоставляемых ts, сделает подсказки IDE более полными.

3. Объявления типов сами по себе являются очень хорошей документацией

Когда возьмешься за проект с историческим багажом, обязательно будет болеть голова по поводу отсутствия документации и комментариев к коду.Для ts возможно делать код как документацию.Объявляя файлы,можно узнать что означают поля и какие поля являются обязательными и необязательными. В качестве простого примера при обертывании компонента кнопки:


export interface ButtonProps {
  style?: React.CSSProperties
  className?: string
  label?: React.ReactNode
  type?: 'primary' | 'default' | 'search'
  size?: 'sm' | 'md' | 'lg' | 'mini'
  disabled?: boolean
  title?: string
  onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void)
}

Из этих файлов объявлений вы можете узнать, что при использовании этого файла кнопки стиль является необязательным значением, указывающим поле стиля, которое может настроить стиль. тип также является необязательным значением, указывающим тип цвета кнопки, вы можете выбрать один из «основной», «по умолчанию», «мини». disabled также является необязательным значением, передаваемое значение должно быть логического типа. Итак, видно, что само объявление типа — очень хорошая документация.

TS в сочетании с React

Использование компонентов класса

Ниже приведен пример официального веб-сайта, создающего интерфейсы Props и State.Интерфейс Props принимает параметры name иэнтузиазм, а интерфейс State принимает параметр currentEnthusiasm.

import * as React from "react";

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

interface State {
  currentEnthusiasm: number;
}

class Hello extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { currentEnthusiasm: props.enthusiasmLevel || 1 };
  }

  onIncrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm + 1);
  onDecrement = () => this.updateEnthusiasm(this.state.currentEnthusiasm - 1);

  render() {
    const { name } = this.props;

    if (this.state.currentEnthusiasm <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(this.state.currentEnthusiasm)}
        </div>
        <button onClick={this.onDecrement}>-</button>
        <button onClick={this.onIncrement}>+</button>
      </div>
    );
  }

  updateEnthusiasm(currentEnthusiasm: number) {
    this.setState({ currentEnthusiasm });
  }
}

export default Hello;

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

Использование компонентов без состояния

Компоненты без состояния также называются компонентами-дураками.Если компонент не имеет собственного состояния внутри, то компонент можно назвать компонентом без состояния. В @types/react определил тип типа SFC

= StatelessComponent

. Когда мы пишем компоненты без состояния, мы можем указать наши компоненты как SFC или StatelessComponent. Он имеет предопределенные дочерние элементы, displayName и т. д. Возьмем кнопку в качестве примера:

import React from 'react'

const Button = ({ onClick: handleClick, children }) => (
  <button onClick={handleClick}>{children}</button>
)

Если вы используете ts для написания компонента без сохранения состояния следующим образом:

import React, { MouseEvent, SFC } from 'react';

type Props = { onClick(e: MouseEvent<HTMLElement>): void };

const Button: SFC<Props> = ({ onClick: handleClick, children }) => (
  <button onClick={handleClick}>{children}</button>
);

readonly

React предусматривает, что this.props.xxx и this.state.xxx не могут быть изменены напрямую, поэтому State и Props можно пометить как неизменяемые данные:

interface Props {
  readonly number: number;
}

interface State {
  readonly color: string;
}

export class Hello extends React.Component<Props, State> {
  someMethod() {
    this.props.number = 123; // Error: props 是不可变的
    this.state.color = 'red'; // Error: 你应该使用 this.setState()
  }
}

Обработка объектов событий

На работе вы можете часто использовать объект Event, событие изменения может использовать React.ChangeEvent, а событие щелчка может использовать React.ChangeEvent.

  onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      // do something
  }
  
  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      // do something
  }

Визуализируемый интерфейс

React может отображать что-то вроде JSX или строки, и они объединяются в тип React.ReactNode, поэтому, когда вы получаете визуализируемый контент, вы можете использовать его:

type Props = {
  header: React.ReactNode;
  body: React.ReactNode;
};

class MyComonent extends React.Component<Props, {}> {
  render() {
    return (
      <div>
        {this.props.header}
        {this.props.body}
      </div>
    );
  }
}

<MyComponent header={<h1>Header</h1>} body={<i>body</i>} />

Суммировать

В крупных и средних фронтенд-проектах из-за динамических и слабых характеристик типов js многие ошибки обнаруживаются только во время выполнения. Являясь надмножеством js, ts привносит проверки во время компиляции во фронтенд-разработку и позволяет избежать многих ошибок на этапе компиляции. Это также привносит в IDE более сильный интеллект. Хотя изучение ts займет некоторое время, оно того стоит. После использования ts для разработки проекта очевидно, что ремонтопригодность проекта стала сильнее, снизился процент ошибок, стало удобнее проверять документы.Понять значение каждого поля можно посмотрев на тип файл декларации.

Ссылки и расширенное чтение

Окончательный шаблон компонента React в TypeScript 2.8

Глубокое понимание TypeScript

TypeScript-React-Starter

Можете обратить внимание на мой паблик-аккаунт «Muchen Classmate», фермера на гусиной фабрике, который обычно записывает какие-то банальные мелочи, технологии, жизнь, инсайты и срастается.

Категории