Полезные видео о фронтенде. Подпишись на Rutube

Сохранение и сброс состояния в React

год назад·11 мин. на чтение

Состояние изолировано между компонентами. React отслеживает, какое состояние принадлежит какому компоненту, основываясь на их месте в UI дереве. Вы можете контролировать, когда сохранять состояние и когда сбрасывать его между повторными рендерингами.

Содержание туториала по React Состояние изолировано между компонентами. React отслеживает, какое состояние принадлежит какому компоненту, основываясь на их месте в UI дереве. Вы можете контролировать, когда сохранять состояние и когда сбрасывать его между повторными рендерингами.

Дерево пользовательского интерфейса

Браузеры используют множество древовидных структур для моделирования пользовательского интерфейса. DOM представляет элементы HTML, CSSOM делает то же самое для CSS. Есть даже accessibility дерево. React также использует древовидные структуры для управления и моделирования пользовательского интерфейса, который вы создаете. React создает деревья пользовательского интерфейса из вашего JSX. Затем React DOM обновляет элементы DOM браузера, чтобы они соответствовали этому дереву пользовательского интерфейса. (React Native переводит эти деревья в элементы, специфичные для мобильных платформ.)

Состояние привязано к положению в дереве

Когда вы задаете состояние компонента, вы можете подумать, что это состояние «живет» внутри компонента. Но на самом деле состояние хранится внутри React. React связывает каждую часть состояния, которую он хранит, с правильным компонентом в зависимости от того, где этот компонент находится в дереве пользовательского интерфейса. В примере ниже есть только один JSX-тег <Counter />, но он отображается в двух разных позициях:

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Это два отдельных счетчика, поскольку каждый из них отображается в своей позиции в дереве. Обычно вам не нужно думать об этих позициях, чтобы использовать React, но может быть полезно понять, как он работает. В React каждый компонент на экране находится в полностью изолированном состоянии. Например, если вы визуализируете два компонента счетчика рядом, каждый из них получит свои собственные независимые состояния score и hover.

Как видите, при обновлении одного счетчика обновляется только состояние этого компонента:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

React будет сохранять состояние до тех пор, пока вы рендерите один и тот же компонент в одной и той же позиции. Чтобы увидеть это, увеличьте оба счетчика, затем удалите второй компонент, сняв флажок «Render the second counter», а затем добавьте его обратно, отметив его снова:

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      <Counter />
      {showB && <Counter />}
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={(e) => {
            setShowB(e.target.checked);
          }}
        />
        Render the second counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Обратите внимание, как в тот момент, когда вы прекращаете рендеринг второго счетчика, его состояние полностью исчезает. Это потому, что когда React удаляет компонент, он уничтожает его состояние. Когда вы ставите галочку «Render the second counter», второй счетчик и его состояние инициализируются с нуля (score = 0) и добавляются в DOM. React сохраняет состояние компонента до тех пор, пока он отображается в своей позиции в дереве пользовательского интерфейса. Если он удаляется или другой компонент отображается в той же позиции, React отбрасывает его состояние.

Тот же компонент в той же позиции сохраняет состояние

В этом примере есть два разных тега <Counter />:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} />}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Когда вы ставите или снимаете флажок, состояние счетчика не сбрасывается. Независимо от того, является ли isFancy истинным или ложным, у вас всегда есть <Counter /> в качестве первого дочернего элемента div, возвращаемого корневым компонентом приложения: Это тот же компонент в той же позиции, поэтому с точки зрения React это тот же счетчик.

Для React важна позиция в UI дереве, а не в JSX разметке

Помните, что для React важна позиция в дереве пользовательского интерфейса, а не в разметке JSX! Этот компонент имеет два предложения return с разными JSX-тегами <Counter /> внутри и снаружи if:

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  if (isFancy) {
    return (
      <div>
        <Counter isFancy={true} />
        <label>
          <input
            type="checkbox"
            checked={isFancy}
            onChange={(e) => {
              setIsFancy(e.target.checked);
            }}
          />
          Use fancy styling
        </label>
      </div>
    );
  }
  return (
    <div>
      <Counter isFancy={false} />
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Вы можете ожидать, что состояние сбросится, когда вы поставите галочку, но это не так! Это связано с тем, что оба этих тега <Counter /> отображаются в одной и той же позиции. React не знает, где вы размещаете условия в своей функции. Все, что он «видит», — это дерево, которое вы возвращаете. В обоих случаях компонент приложения возвращает <div> с <Counter /> в качестве первого дочернего элемента. Вот почему React считает их одним и тем же <Counter />. Вы можете думать о них как об одном и том же «адресе»: первый дочерний элемент первого дочернего элемента корня. Вот как React сопоставляет их между предыдущим и следующим рендерингом, независимо от того, как вы структурируете свою логику.

Сброс состояния разных компонентов в одном и том же месте

В этом примере установка флажка заменит <Counter> на <p>:

import { useState } from 'react';

export default function App() {
  const [isPaused, setIsPaused] = useState(false);
  return (
    <div>
      {isPaused ? <p>See you later!</p> : <Counter />}
      <label>
        <input
          type="checkbox"
          checked={isPaused}
          onChange={(e) => {
            setIsPaused(e.target.checked);
          }}
        />
        Take a break
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Здесь вы переключаетесь между различными типами компонентов в одной и той же позиции. Изначально первый дочерний элемент <div> содержал Counter. Но когда вы заменили p, React удалил Counter из дерева пользовательского интерфейса и уничтожил его состояние. Кроме того, когда вы визуализируете другой компонент в той же позиции, он сбрасывает состояние всего его поддерева.

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <div>
          <Counter isFancy={true} />
        </div>
      ) : (
        <section>
          <Counter isFancy={false} />
        </section>
      )}
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={(e) => {
            setIsFancy(e.target.checked);
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Состояние счетчика сбрасывается при установке флажка. Хотя вы визуализируете счетчик, первый дочерний элемент div меняется с div на section. Когда дочерний элемент div был удален из DOM, все дерево под ним (включая Counter и его состояние) также было уничтожено. Как правило, если вы хотите сохранить состояние между повторными рендерингами, структура вашего дерева должна «соответствовать» от одного рендеринга к другому. Если структура отличается, состояние уничтожается, потому что React уничтожает состояние, когда удаляет компонент из дерева.

Вот почему вы не должны вкладывать определения функций компонентов.

Здесь функция компонента MyTextField определена внутри MyComponent:

import { useState } from 'react';

export default function MyComponent() {
  const [counter, setCounter] = useState(0);

  function MyTextField() {
    const [text, setText] = useState('');

    return <input value={text} onChange={(e) => setText(e.target.value)} />;
  }

  return (
    <>
      <MyTextField />
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        Clicked {counter} times
      </button>
    </>
  );
}

Каждый раз, когда вы нажимаете кнопку, состояние инпута исчезает. Это связано с тем, что для каждого рендеринга MyComponent создается отдельная функция MyTextField. Вы визуализируете другой компонент в той же позиции, поэтому React сбрасывает все состояния ниже. Это приводит к ошибкам и проблемам с производительностью. Чтобы избежать этой проблемы, всегда объявляйте функции компонентов на верхнем уровне и не вкладывайте их определения.

Сброс состояния в том же положении

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

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

В этой реализации при смене игрока счет сохраняется. Два счетчика отображаются в одной и той же позиции, поэтому React видит их как один и тот же счетчик, проп person которого изменился. Но концептуально в этом приложении они должны быть двумя отдельными счетчиками. Они могут появляться в одном и том же месте пользовательского интерфейса, но один из них является счетчиком Тейлора, а другой — счетчиком Сары. Существует два способа сброса состояния при переключении между ними:

Отрисовать компоненты в разных положениях
Дать каждому компоненту явную идентификацию с key

Вариант 1: Рендеринг компонента в разных позициях

Если вы хотите, чтобы эти два счетчика были независимыми, вы можете визуализировать их в двух разных позициях:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA && <Counter person="Taylor" />}
      {!isPlayerA && <Counter person="Sarah" />}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Изначально isPlayerA имеет значение true. Итак, первая позиция содержит состояние Counter, а вторая пуста.
Когда вы нажимаете кнопку «Next player», первая позиция очищается, но вторая теперь содержит счетчик.

Состояние каждого счетчика уничтожается каждый раз, когда он удаляется из DOM. Вот почему они сбрасываются каждый раз, когда вы нажимаете кнопку. Это решение удобно, когда у вас есть только несколько независимых компонентов, отображаемых в одном месте. В этом примере у вас есть только два, поэтому не составит труда отрисовать оба по отдельности в JSX.

Вариант 2: Сброс состояния с помощью ключа

Существует также другой, более общий способ сброса состояния компонента. Возможно, вы видели key при рендеринге списков. Ключи нужны не только для списков. Вы можете использовать ключи, чтобы React различал любые компоненты. По умолчанию React использует порядок внутри родителя («первый счетчик», «второй счетчик»), чтобы различать компоненты. Но ключи позволяют вам сказать React, что это не просто первый счетчик или второй счетчик, а конкретный счетчик — например, счетчик для Тейлора. Таким образом, React будет узнавать счетчик для Тейлора, где бы он ни появлялся в дереве. В этом примере два <Counter /> не имеют общего состояния, даже если они появляются в одном и том же месте в JSX:

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? (
        <Counter key="Taylor" person="Taylor" />
      ) : (
        <Counter key="Sarah" person="Sarah" />
      )}
      <button
        onClick={() => {
          setIsPlayerA(!isPlayerA);
        }}
      >
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>
        {person}'s score: {score}
      </h1>
      <button onClick={() => setScore(score + 1)}>Add one</button>
    </div>
  );
}

Переключение между Тейлором и Сарой не сохраняет состояние. Это потому, что вы дали им разные ключи:

{
  isPlayerA ? (
    <Counter key="Taylor" person="Taylor" />
  ) : (
    <Counter key="Sarah" person="Sarah" />
  );
}

Указание ключа (key) говорит React использовать сам ключ как часть позиции, а не их порядок внутри родителя. Вот почему, даже если вы визуализируете их в одном и том же месте в JSX, с точки зрения React это два разных счетчика. В результате они никогда не будут совместно использовать состояние. Каждый раз, когда счетчик появляется на экране, создается его состояние. Каждый раз, когда он удаляется, его состояние уничтожается. Переключение между ними сбрасывает их состояние снова и снова. Помните, что ключи не являются глобально уникальными. Они только определяют положение внутри родителя.

Сброс значений формы с помощью ключа

Сброс состояния с помощью ключа особенно полезен при работе с формами. В этом приложении чата компонент <Chat> содержит состояние для вводимого текста:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={(contact) => setTo(contact)}
      />
      <Chat contact={to} />
    </div>
  );
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' },
];

Попробуйте ввести что-нибудь в поле ввода, а затем нажмите “Alice” или “Bob”, чтобы выбрать другого получателя. Вы заметите, что состояние ввода сохраняется, потому что <Chat> отображается в той же позиции в дереве. Во многих приложениях это может быть желаемым поведением, но не в приложении чата. Вы не хотите, чтобы пользователь отправил сообщение, которое он уже набрал, не тому человеку из-за случайного клика. Чтобы исправить это, добавьте key:

<Chat key={to.id} contact={to} />

Это гарантирует, что при выборе другого получателя компонент чата будет воссоздан с нуля, включая все состояния в дереве под ним. React также будет воссоздавать элементы DOM вместо их повторного использования. Теперь переключение получателя всегда очищает текстовое поле:

import { useState } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';

export default function Messenger() {
  const [to, setTo] = useState(contacts[0]);
  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedContact={to}
        onSelect={(contact) => setTo(contact)}
      />
      <Chat key={to.id} contact={to} />
    </div>
  );
}

const contacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' },
];

Сохранение состояния удаленных компонентов

В реальном чат-приложении вы, вероятно, захотите восстановить состояние ввода, когда пользователь снова выбирает предыдущего получателя. Есть несколько способов сохранить состояние «живым» для компонента, который больше не виден:

Вы можете отобразить все чаты, а не только текущий, но скрыть все остальные с помощью CSS. Чаты не будут удалены из дерева, поэтому их локальное состояние будет сохранено. Это решение отлично работает для простых пользовательских интерфейсов. Но это может быть очень медленным, если скрытые деревья большие и содержат много узлов DOM.
Вы можете поднять состояние и сохранить ожидающее сообщение для каждого получателя в родительском компоненте. Таким образом, когда дочерние компоненты удаляются, это не имеет значения, потому что родительский компонент сохраняет важную информацию. Это наиболее распространенное решение.
Вы также можете использовать другой источник в дополнение к состоянию React. Например, вы, вероятно, хотите, чтобы черновик сообщения сохранялся, даже если пользователь случайно закроет страницу. Чтобы реализовать это, вы можете сделать так, чтобы компонент Chat инициализировал свое состояние, читая из localStorage, и сохранял черновики там же.

Независимо от того, какую стратегию вы выберете, чат с Алисой концептуально отличается от чата с Бобом, поэтому имеет смысл дать ключ к дереву <Chat> на основе текущего получателя.

Резюме

React сохраняет состояние до тех пор, пока один и тот же компонент отображается в одной и той же позиции.
Состояние не сохраняется в тегах JSX. Он связан с позицией дерева, в которую вы помещаете этот JSX.
Вы можете заставить поддерево сбросить свое состояние, назначив ему другой ключ.
Не вставляйте определения компонентов друг в друга, иначе вы случайно сбросите состояние.

Frontend React Туториал по React

Типизация функций с помощью TypeScript

год назад·15 мин. на чтение

Туториал по TypeScript - Типизация функций TypeScript

Содержание туториала по TypeScript Функции — это основной строительный блок любого приложения, будь то локальные функции, импортированные из другого модуля или методы класса. Они также являются значениями, и, как и другие значения, в TypeScript есть много способов описать, как можно вызывать функции.

Типизация функций

Самый простой способ типизировать функцию — использовать выражение функционального типа. Эти типы синтаксически похожи на стрелочные функции:

function greeter(fn: (a: string) => void) {
  fn('Hello, World');
}

function printToConsole(s: string) {
  console.log(s);
}

greeter(printToConsole);

Синтаксис (a:string) => void означает "функция с одним параметром a, типа string, который не имеет возвращаемого значения". Как и в случае с определением функции, если тип параметра не указан, он будет иметь тип any. Обратите внимание, что имя параметра является обязательным. Тип функции (string) => void означает "функция с параметром, названным string типа any"! Конечно, мы можем использовать псевдоним типа для обозначения типа функции:

type GreetFunction = (a: string) => void;
function greeter(fn: GreetFunction) {
  // ...
}

Сигнатура вызова (Call Signature)

В JavaScript функции могут не только вызываться, но и иметь свойства. Однако синтаксис выражения функционального типа не позволяет объявлять свойства. Если мы хотим описать что-то вызываемое с помощью свойств, мы можем написать сигнатуру вызова в объектном типе:

type DescribableFunction = {
  description: string;
  (someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
  console.log(fn.description + ' returned ' + fn(6));
}

Обратите внимание, что синтаксис немного отличается от выражения функционального типа — используется : между списком параметров и возвращаемым типом, а не =>.

Сигнатура конструктора (Construct Signature)

Функции JavaScript также можно вызывать с помощью оператора new. В TypeScript они считаются конструкторами, потому что они обычно создают новый объект. Вы можете написать сигнатуру конструктора, добавив ключевое слово new перед сигнатурой вызова:

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor('hello');
}

Некоторые объекты, такие как объект Date в JavaScript, можно вызывать как с оператором new, так и без него. Вы можете произвольно комбинировать сигнатуры вызова и конструктора в одном и том же типе:

interface CallOrConstruct {
  new (s: string): Date;
  (n?: number): number;
}

Функции-дженерики (Generic Functions)

Обычно пишут функцию, в которой типы входных данных связаны с типом выходных данных или где типы двух входных данных каким-то образом связаны. Давайте рассмотрим функцию, которая возвращает первый элемент массива:

function firstElement(arr: any[]) {
  return arr[0];
}

Эта функция выполняет свою работу, но, к сожалению, имеет возвращаемый тип any. Лучше бы функция возвращала тип элемента массива. В TypeScript дженерики используются, когда мы хотим описать соответствие между двумя значениями. Мы делаем это, объявляя параметр типа в сигнатуре функции:

function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

Добавив к этой функции параметр Type и используя его в двух местах, мы создали связь между входными данными функции (массивом) и выходными (возвращаемым значением). Теперь, когда мы ее вызываем, получается более конкретный тип:

// s имеет тип 'string'
const s = firstElement(['a', 'b', 'c']);
// n имеет тип 'number'
const n = firstElement([1, 2, 3]);
// u имеет тип undefined
const u = firstElement([]);

Предположение типа (Inference)

Мы можем использовать несколько параметров типа. Например, самописная версия функции map может выглядеть так:

function map<Input, Output>(
  arr: Input[],
  func: (arg: Input) => Output
): Output[] {
  return arr.map(func);
}

// Параметр 'n' имеет тип 'string'
// 'parsed' имеет тип 'number[]'
const parsed = map(['1', '2', '3'], (n) => parseInt(n));

Обратите внимание, что в приведенном примере TypeScript может сделать вывод относительно типа Input на основе переданного string[], а относительно типа Output на основе возвращаемого number.

Ограничения (constraints)

Ограничение используется для того, чтобы ограничивать типы, которые принимаются параметром типа. Реализуем функцию, возвращающую самое длинное из двух значений. Для этого нам потребуется свойство length, которое будет числом. Мы ограничим параметр типа типом number с помощью ключевого слова extends:

function longest<Type extends { length: number }>(a: Type, b: Type) {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
}

// longerArray имеет тип 'number[]'
const longerArray = longest([1, 2], [1, 2, 3]);
// longerString имеет тип 'alice' | 'bob'
const longerString = longest('alice', 'bob');
// Ошибка! У чисел нет свойства 'length'
const notOK = longest(10, 100);

// Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
// Аргумент типа 'number' не может быть присвоен аргументу типа '{ length: number; }'.

В этом примере есть несколько интересных моментов. Мы позволили TypeScript определять возвращаемый тип самого длинного значения. Вывод типа возвращаемого значения также работает с функциями-дженериками. Поскольку мы ограничили Type значением {length: number}, мы смогли получить доступ к свойству .length параметров a и b. Без ограничения типа мы не смогли бы получить доступ к этим свойствам, потому что значения могли быть какого-то другого типа без свойства length. Типы longerArray и longerString были выведены на основе аргументов. Помните, что дженерики — это связывание двух или более значений с одним и тем же типом. Наконец, как мы и хотели, вызов longest(10, 100) ,был отклонен, потому что тип number не имеет свойства .length.

Работа со значениями с ограничениями

Вот распространенная ошибка при работе с ограничениями-дженериками:

function minimumLength<Type extends { length: number }>(
  obj: Type,
  minimum: number
): Type {
  if (obj.length >= minimum) {
    return obj;
  } else {
    return { length: minimum };

    // Type '{ length: number; }' is not assignable to type 'Type'.
    // '{ length: number; }' is assignable to the constraint of type 'Type', but 'Type' could be instantiated with a different subtype of constraint '{ length: number; }'.
  }
}

Может показаться, что с этой функцией все в порядке — Type ограничен до { length: number }, и функция либо возвращает Type, либо значение, соответствующее этому ограничению. Проблема в том, что функция обещает вернуть тот же тип объекта, который был передан, а не просто какой-то объект, соответствующий ограничению. Если бы этот код был работающим, вы могли бы написать код, который не работал бы:

// 'arr' получает значение { length: 6 }
const arr = minimumLength([1, 2, 3], 6);
// и падает, т.к. массив имеет метод 'slice'
// но не возвращаемый объект!
console.log(arr.slice(0));

Определение типа аргументов

TypeScript обычно может вывести предполагаемые аргументы типа в вызове дженерика, но не всегда. Например, вы написали функцию для объединения двух массивов:

function combine<Type>(arr1: Type[], arr2: Type[]): Type[] {
  return arr1.concat(arr2);
}

Обычно было бы ошибкой вызывать эту функцию с несовпадающими массивами:

const arr = combine([1, 2, 3], ['hello']);

// Type 'string' is not assignable to type 'number'.
// Нельзя присвоить тип 'string' типу 'number'.

Однако, если вы намеревались сделать это, вы можете вручную указать Type:

const arr = combine<string | number>([1, 2, 3], ['hello']);

Как написать хорошую функцию-дженерик?

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

Используйте параметры типа без ограничений

Вот два способа написания функции, которые кажутся похожими:

function firstElement1<Type>(arr: Type[]) {
  return arr[0];
}

function firstElement2<Type extends any[]>(arr: Type) {
  return arr[0];
}

// a: number (хорошо)
const a = firstElement1([1, 2, 3]);
// b: any (плохо)
const b = firstElement2([1, 2, 3]);

На первый взгляд они могут показаться идентичными, но firstElement1 — гораздо лучший способ написать эту функцию. Предполагаемый тип возвращаемого значения — Type, но предполагаемый возвращаемый тип firstElement2 — any, поскольку TypeScript должен разрешать выражение arr[0] с использованием типа ограничения, а не «ждать» элемент во время вызова. Правило: по возможности используйте сам параметр типа, а не ограничивайте его.

Используйте меньше параметров типа

Вот еще пара похожих функций:

function filter1<Type>(arr: Type[], func: (arg: Type) => boolean): Type[] {
  return arr.filter(func);
}

function filter2<Type, Func extends (arg: Type) => boolean>(
  arr: Type[],
  func: Func
): Type[] {
  return arr.filter(func);
}

Мы создали параметр типа Func, который не связывает два значения. Это всегда красный флаг, потому что это означает, что вызывающие программы, желающие указать аргументы типа, должны вручную указать дополнительный аргумент типа без всякой причины. Func ничего не делает, но затрудняет чтение и осмысление функции! Правило: всегда используйте как можно меньше параметров типа

Параметры типа должны появляться дважды

Иногда мы забываем, что функции не обязательно быть дженериком:

function greet<Str extends string>(s: Str) {
  console.log('Hello, ' + s);
}

greet('world');

Мы могли бы написать более простую версию:

function greet(s: string) {
  console.log('Hello, ' + s);
}

Помните, что параметры типа предназначены для связи типов нескольких значений. Если параметр типа используется только один раз в сигнатуре функции, он ни с чем не связан. Правило: если параметр типа появляется только в одном месте, серьезно подумайте, действительно ли он вам нужен.

Необязательные параметры

Функции в JavaScript часто принимают переменное количество аргументов. Например, метод toFixed для значений типа number принимает необязательное количество цифр:

function f(n: number) {
  console.log(n.toFixed()); // 0 аргументов
  console.log(n.toFixed(3)); // 1 аргумент
}

Мы можем смоделировать это в TypeScript, пометив параметр как необязательный с помощью ?:

function f(x?: number) {
  // ...
}
f(); // OK
f(10); // OK

Хотя параметр указан как типа number, параметр x на самом деле будет иметь тип number | undefined, потому что неуказанные параметры в JavaScript получают значение undefined. Вы также можете указать параметр по умолчанию:

function f(x = 10) {
  // ...
}

Теперь в теле f, x будет иметь тип number, потому что любой неопределенный аргумент будет заменен на 10. Обратите внимание, что, когда параметр является необязательным, вызывающая сторона всегда может передать значение undefined, так как это просто имитирует «отсутствующий» аргумент:

declare function f(x?: number): void;

// все вызовы допустимы
f();
f(10);
f(undefined);

Необязательные параметры в функциях обратного вызова

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

function myForEach(arr: any[], callback: (arg: any, index?: number) => void) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i], i);
  }
}

Обычно при написании index? в качестве необязательного параметр разработчики хотят, чтобы оба этих вызова валидными:

myForEach([1, 2, 3], (a) => console.log(a));
myForEach([1, 2, 3], (a, i) => console.log(a, i));

На самом деле это означает, что колбек может быть вызван с одним аргументом. Другими словами, в определении функции сказано, что реализация может выглядеть так:

function myForEach(arr: any[], callback: (arg: any, index?: number) => void) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]);
  }
}

В свою очередь, TypeScript будет применять это значение и выдавать ошибки:

myForEach([1, 2, 3], (a, i) => {
  console.log(i.toFixed());
  // Object is possibly 'undefined'.
  // Объект, возможно, 'undefined'.
});

В JavaScript, если вы вызываете функцию с бОльшим количеством аргументов, лишние аргументы просто игнорируются. TypeScript ведет себя точно так же. Функции с меньшим количеством параметров (одного и того же типа) всегда могут заменить функции с бОльшим количеством параметров. При типизации функции для колбека никогда делайте параметр необязательным, если вы не собираетесь вызывать функцию без передачи этого аргумента.

Перегрузка функций (Function Overloads)

Некоторые функции JavaScript можно вызывать с различным числом аргументов и типами. Например, вы можете написать функцию для создания даты Date, которая принимает отметку времени (один аргумент) или спецификацию месяц/день/год (три аргумента). В TypeScript мы можем указать функцию, которую можно вызывать по-разному, написав сигнатуры перегрузки. Для этого нужно написать несколько сигнатур функции (обычно две или более), а затем тело функции:

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(1, 3);

// No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.
// Нет перегрузки, ожидающей 2 аргумента, но есть перегрузки, которые ожидают либо 1, либо 3 аргумента.

В этом примере мы написали две перегрузки: одну, принимающую один аргумент, и другую, принимающую три аргумента. Эти первые две сигнатуры называются сигнатурами перегрузки. Затем мы написали реализацию функции с совместимой сигнатурой. Функции имеют сигнатуру реализации, но эту сигнатуру нельзя вызвать напрямую. Несмотря на то, что мы написали функцию с двумя необязательными параметрами после обязательного, ее нельзя вызвать с двумя параметрами!

Сигнатуры перегрузки и сигнатура реализации

Это распространенный источник путаницы. Часто люди пишут такой код и не понимают, почему возникает ошибка:

function fn(x: string): void;
function fn() {
  // ...
}
// Expected to be able to call with zero arguments
// Ожидается, что можно вызвать без аргументов
fn();
// Expected 1 arguments, but got 0.
// Ожидается 1 аргумент, но получено 0.

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

function fn(x: boolean): void;
// Неправильный аргумент функции
function fn(x: string): void;
// This overload signature is not compatible with its implementation signature.
// Эта перегрузка сигнатуры не совместима с сигнатурой реализации.
function fn(x: boolean) {}

function fn(x: string): string;
// Неверный возвращаемый тип
function fn(x: number): boolean;
// This overload signature is not compatible with its implementation signature.
// Cигнатура перегрузки не совместима с сигнатурой реализации.
function fn(x: string | number) {
  return 'oops';
}

Как написать хорошую перегрузку

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

function len(s: string): number;
function len(arr: any[]): number;
function len(x: any) {
  return x.length;
}

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

len(''); // OK
len([0]); // OK
len(Math.random() > 0.5 ? 'hello' : [0]);
// No overload matches this call.
//  Overload 1 of 2, '(s: string): number', gave the following error.
//    Argument of type 'number[] | "hello"' is not assignable to parameter of type 'string'.
//      Type 'number[]' is not assignable to type 'string'.
//  Overload 2 of 2, '(arr: any[]): number', gave the following error.
//    Argument of type 'number[] | "hello"' is not assignable to parameter of type 'any[]'.
//     Type 'string' is not assignable to type 'any[]'.

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

function len(x: any[] | string) {
  return x.length;
}

Так гораздо лучше! Ее можно вызывать со значением любого типа, и в качестве дополнительного бонуса нам не нужно вычислять правильную сигнатуру реализации. Всегда предпочитайте параметры с объединением вместо перегрузок, когда это возможно.

Определение `this` в функциях

С помощью анализа потока кода TypeScript сделает вывод о том, чем является this:

const user = {
  id: 123,

  admin: false,
  becomeAdmin: function () {
    this.admin = true;
  },
};

TypeScript понимает, что функция user.becomeAdmin имеет соответствующий this, который является объектом user извне. В спецификации JavaScript указано, что у вас не может быть параметра с именем this, TypeScript использует это, чтобы можно было объявить тип для this в теле функции.

interface DB {
  filterUsers(filter: (this: User) => boolean): User[];
}

const db = getDB();
const admins = db.filterUsers(function (this: User) {
  return this.admin;
});

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

interface DB {
  filterUsers(filter: (this: User) => boolean): User[];
}

const db = getDB();
const admins = db.filterUsers(() => this.admin);
// The containing arrow function captures the global value of 'this'.
// Стрелочная функция захватывает глобальный `this`.

// Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
// Элемент неявно имеет тип 'any' т.к. тип 'typeof globalThis' не имеет сигнатуры.

Другие типы, о которых следует знать

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

`void`

void представляет возвращаемое значение функций, которые не возвращают значения. Этот тип выведется из функции, когда функция не имеет операторов return или не возвращает никакого явного значения из этих операторов return:

// Выведенный тип возвращаемого результата void
function noop() {
  return;
}

В JavaScript функция, которая не возвращает никакого значения, неявно вернет значение undefined. Однако void и undefined — это не одно и то же в TypeScript. Дополнительные подробности приведены в конце этой главы.

`object`

Специальный тип object относится к любому значению, не являющемуся примитивом (string, number, bigint, boolean, symbol, null или undefined). Это отличается от типа пустого объекта { }, а также отличается от глобального типа Object. Очень вероятно, что вы никогда не будете использовать Object. object не является Object. Всегда используйте object! Обратите внимание, что в JavaScript функции являются объектами: у них есть свойства, есть Object.prototype в своей цепочке прототипов, являются instanceof Object, вы можете вызывать для них Object.keys и т.д. По этой причине типы функций считаются object в TypeScript.

`unknown`

Тип unknown представляет любое значение. Это похоже на тип any, но безопаснее, потому что нельзя ничего делать с неизвестным значением:

function f1(a: any) {
  a.b(); // OK
}
function f2(a: unknown) {
  a.b();
  // Object is of type 'unknown'.
  // Объект типа 'unknown'.
}

Это полезно при описании типов функций, потому что вы можете описывать функции, которые принимают любое значение, не имея значений any в теле вашей функции. И наоборот, вы можете описать функцию, которая возвращает значение типа unknown:

function safeParse(s: string): unknown {
  return JSON.parse(s);
}

// Нужно быть осторожным с 'obj'!
const obj = safeParse(someRandomString);

`never`

Некоторые функции никогда не возвращают значение:

function fail(msg: string): never {
  throw new Error(msg);
}

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

function fn(x: string | number) {
  if (typeof x === 'string') {
    // что-то делаем
  } else if (typeof x === 'number') {
    // что-то делаем еще
  } else {
    x; // имеет тип 'never'!
  }
}

`Function`

Глобальный тип Function описывает такие свойства, как bind, call, apply и другие, присутствующие во всех значениях функций в JavaScript. Он также имеет специальное свойство, позволяющее вызывать значения типа Function — такие вызовы возвращают any:

function doSomething(f: Function) {
  return f(1, 2, 3);
}

Это нетипизированный вызов функции, и его обычно лучше избегать из-за небезопасного возвращаемого типа any. Если вам нужно принять произвольную функцию без ее вызова, тип () => void, как правило, безопаснее.

Остальные параметры и аргументы (rest)

Остальные параметры

В дополнение к использованию необязательных параметров или перегрузок функций, которые могут принимать множество фиксированных аргументов, мы также можем определить функции, которые принимают неограниченное количество аргументов, используя синтаксис остальных параметров (rest parameters). Остальные параметры появляется после всех остальных параметров и используют синтаксис ...:

function multiply(n: number, ...m: number[]) {
  return m.map((x) => n * x);
}
// 'a' имеет значение [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4);

В TypeScript аннотация типа для этих параметров неявно является any[] вместо any, и любая указанная аннотация типа должна иметь форму Array<T> или T[] или тип кортежа (о котором мы узнаем позже).

Остальные аргументы

И наоборот, мы можем предоставить переменное количество аргументов из массива, используя синтаксис распыления (spread syntax). Например, метод массивов push принимает любое количество аргументов:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2);

Обратите внимание, что в целом TypeScript не предполагает, что массивы иммутабельные. Это может привести к неожиданному поведению:

// Предполагаемый тип number[] - массив с двумя или более числами,
// не конкретно с двумя числами
const args = [8, 5];
const angle = Math.atan2(...args);
// A spread argument must either have a tuple type or be passed to a rest parameter.
// Распыленный аргумент должен быть типом кортежа или отправлен как остальные параметры (rest)

Лучшее решение для этой ситуации зависит от вашего кода, но в целом const является наиболее простым решением:

// Представлен как кортеж длины 2
const args = [8, 5] as const;
// OK
const angle = Math.atan2(...args);

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

Деструктуризация параметров (Parameter Destructuring)

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

function sum({ a, b, c }) {
  console.log(a + b + c);
}
sum({ a: 10, b: 3, c: 9 });

Аннотация типа для объекта идет после синтаксиса деструктурирования:

function sum({ a, b, c }: { a: number; b: number; c: number }) {
  console.log(a + b + c);
}

Это может выглядеть немного многословно, но здесь вы также можете использовать именованный тип:

type ABC = { a: number; b: number; c: number };
function sum({ a, b, c }: ABC) {
  console.log(a + b + c);
}

Присваиваемость функций

Возвращаемый тип `void`

Возвращаемый тип void для функций может привести к необычному, но ожидаемому поведению. Контекстуальная типизация (contextual typing) с возвращаемым типом void не заставляет функции ничего не возвращать. Иными словами, По-другому можно сказать, что функция с возвращаемым типом void (type vf = () => void), при реализации может вернуть любое другое значение, но оно будет проигнорировано. Таким образом, допустимы следующие реализации () => void:

type voidFunc = () => void;

const f1: voidFunc = () => {
  return true;
};

const f2: voidFunc = () => true;

const f3: voidFunc = function () {
  return true;
};

И когда возвращаемое значение одной из этих функций будет присвоено другой переменной, оно сохранит тип void:

const v1 = f1();

const v2 = f2();

const v3 = f3();

Поэтому следующий код валидный, несмотря на то, что Array.prototype.push возвращает number, а метод Array.prototype.forEach ожидает функцию с возвращаемым типом void.

const src = [1, 2, 3];
const dst = [0];

src.forEach((el) => dist.push(el));

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

function f2(): void {
  // @ts-expect-error
  return true;
}

const f3 = function (): void {
  // @ts-expect-error
  return true;
};

Frontend TypeScript Туториал по TypeScript