Состояние - память React компонента

Содержание туториала по React Компонентам часто необходимо изменить то, что отображается на экране в результате взаимодействия. Ввод в форму должен обновить поле ввода, нажатие «Далее» на карусели изображений должно изменить отображаемое изображение, нажатие «купить» должно поместить продукт в корзину. Компоненты должны «запоминать» вещи: текущее входное значение, текущее изображение, корзину. В React такой тип памяти для конкретного компонента называется состоянием.

Когда обычной переменной недостаточно

Вот компонент, который рендерит изображение скульптуры. Нажатие кнопки «Далее» должно отобразить следующую скульптуру, изменив индекс на 1, затем на 2 и так далее. Однако это не сработает:

// App.jsx

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>Next</button>
      <h2>
        <i>{sculpture.name} </i>
        by {sculpture.artist}
      </h2>
      <h3>
        ({index + 1} of {sculptureList.length})
      </h3>
      <img src={sculpture.url} alt={sculpture.alt} />
      <p>{sculpture.description}</p>
    </>
  );
}

// data.js

export const sculptureList = [
  {
    name: 'Sculpture 1 Name',
    artist: 'Sculpture 1 Artist',
    description: 'Sculpture 1 Description',
    url: 'https://example.com/sculpture1.jpg',
    alt: 'Sculpture 1 Description',
  },
  {
    name: 'Sculpture 2 Name',
    artist: 'Sculpture 2 Artist',
    description: 'Sculpture 2 Description',
    url: 'https://example.com/sculpture2.jpg',
    alt: 'Sculpture 2 Description',
  },
];

Обработчик события handleClick обновляет локальную переменную index. Но две вещи препятствуют тому, чтобы это изменение было видимым:

1. Локальные переменные не сохраняются между рендерами. Когда React рендерит этот компонент во второй раз, он рендерит его с нуля — он не учитывает никаких изменений в локальных переменных.
2. Изменения локальных переменных не вызовут рендеринга. React не понимает, что ему нужно снова визуализировать компонент с новыми данными.

Чтобы обновить компонент новыми данными, должны произойти две вещи:

1. Данные между рендерами должны сохраняться.
2. Нужно заставить React отрендерить компонент с новыми данными (повторный рендеринг).

Хук useState предоставляет две вещи:

1. Переменную состояния для сохранения данных между рендерами.
2. Функцию установки состояния для обновления переменной и запуска React для повторного рендеринга компонента.

Добавление переменной состояния

Чтобы добавить переменную состояния, импортируйте useState из React в начало файла:

import { useState } from 'react';

Затем замените эту строку:

let index = 0;

на эту:

const [index, setIndex] = useState(0);

index — это переменная состояния, а setIndex — функция установки состояния. Синтаксис [ и ] называется деструктурированием массива и позволяет считывать значения из массива. Массив, возвращаемый useState, всегда содержит ровно два элемента. Вот как они работают вместе в handleClick:

function handleClick() {
  setIndex(index + 1);
}

Теперь нажатие кнопки «Далее» переключает текущее изображение:

// App.jsx

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);

  function handleClick() {
    setIndex(index + 1);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>Next</button>
      <h2>
        <i>{sculpture.name} </i>
        by {sculpture.artist}
      </h2>
      <h3>
        ({index + 1} of {sculptureList.length})
      </h3>
      <img src={sculpture.url} alt={sculpture.alt} />
      <p>{sculpture.description}</p>
    </>
  );
}

Встречайте свой первый хук

В React useState, как и любая другая функция, начинающаяся с «use», называется хуком. Хуки — это специальные функции, которые доступны только во время рендеринга React (о чем мы поговорим подробнее на следующей странице). Они позволяют вам «подключаться» к различным функциям React. Состояние — это только одна из этих функций, но позже вы познакомитесь с другими хуками. Хуки — функции, начинающиеся с use — могут вызываться только на верхнем уровне ваших компонентов или ваших собственных кастомных хуков. Вы не можете вызывать хуки внутри условий, циклов или других вложенных функций. Хуки — это функции, но полезно думать о них как о безусловных декларациях о потребностях вашего компонента. Вы используете (use) функции React в верхней части вашего компонента, подобно тому, как вы «импортируете» модули в верхней части вашего файла.

Как устроен useState?

Когда вы вызываете useState, вы сообщаете React, что хотите, чтобы этот компонент что-то запомнил:

const [index, setIndex] = useState(0);

В этом случае вы хотите, чтобы React запомнил index. По соглашению эта пара именуется как const [something, setSomething]. Вы можете назвать их как угодно, но соглашения облегчают понимание разных проектов. Единственный аргумент useState — это начальное значение вашей переменной состояния. В этом примере начальное значение индекса устанавливается равным 0 с помощью useState(0). Каждый раз, когда ваш компонент рендерится, useState предоставляет вам массив, содержащий два значения:

1. Переменная состояния (index) со значением, которое вы сохранили.
2. Функция установки состояния (setIndex), которая может обновлять переменную состояния и запускать React для повторного рендеринга компонента.

Вот как это происходит в действии:

const [index, setIndex] = useState(0);

1. Ваш компонент отображается в первый раз. Поскольку вы передали 0 в useState в качестве начального значения для index, он вернет [0, setIndex]. React помнит, что 0 — это последнее значение состояния.
2. Вы обновляете состояние. Когда пользователь нажимает кнопку, он вызывается setIndex(index + 1). index равен 0, поэтому это setIndex(1). Это говорит React запомнить, что index теперь равен 1, и запускается другой рендеринг.
3. Второй рендер вашего компонента. React по-прежнему видит useState(0), но поскольку React запомнил, что вы установили index равным 1, вместо этого он возвращает [1, setIndex].

И т.д.

Несколько переменных состояния в компоненте

В одном компоненте вы можете иметь столько переменных состояния любого типа, сколько захотите. Этот компонент имеет две переменные состояния, числовой index и логическое значение showMore, которое переключается, когда вы нажимаете "Show details":

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  function handleNextClick() {
    setIndex(index + 1);
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleNextClick}>Next</button>
      <h2>
        <i>{sculpture.name} </i>
        by {sculpture.artist}
      </h2>
      <h3>
        ({index + 1} of {sculptureList.length})
      </h3>
      <button onClick={handleMoreClick}>
        {showMore ? 'Hide' : 'Show'} details
      </button>
      {showMore && <p>{sculpture.description}</p>}
      <img src={sculpture.url} alt={sculpture.alt} />
    </>
  );
}

Рекомендуется иметь несколько переменных состояния, если их состояние не связано, например index и showMore в этом примере. Но если вы обнаружите, что часто меняете две переменные состояния вместе, может быть лучше объединить их в одну. Например, если у вас есть форма с множеством полей, удобнее иметь одну переменную состояния, которая содержит объект, чем переменную состояния для каждого поля. В руководстве "Какую структуру состояния выбрать" содержится больше советов по этому вопросу.

Как React узнает, какое состояние вернуть?

Вы могли заметить, что вызов useState не получает никакой информации о том, на какую переменную состояния он ссылается. В useState не передается «идентификатор», так как же он узнает, какую из переменных состояния следует вернуть? Чтобы обеспечить лаконичный синтаксис, хуки полагаются на стабильный порядок вызовов при каждом рендеринге одного и того же компонента. Это хорошо работает на практике, потому что если вы будете следовать правилу выше («вызывать хуки только на верхнем уровне»), хуки всегда будут вызываться в одном и том же порядке. Кроме того, linter плагин отлавливает большинство ошибок. Внутри React хранит массив пар состояний для каждого компонента. Он также поддерживает индекс для текущуй пары, который перед рендерингом устанавливается в 0. Каждый раз, когда вы вызываете useState, React предоставляет вам следующую пару состояний и увеличивает индекс.

В следующем примере не используется React, но он дает представление о внутренней работе useState:

let componentHooks = [];
let currentHookIndex = 0;

// Как useState работает внутри React (упрощенно).
function useState(initialState) {
  let pair = componentHooks[currentHookIndex];
  if (pair) {
    // Это не первый рендер,
    // поэтому пара состояний уже существует.
    // Верните его и приготовьтесь к следующему хуку.
    currentHookIndex++;
    return pair;
  }

  // Это первый рендеринг,
  // поэтому создаем пару состояния и сохраняем ее.
  pair = [initialState, setState];

  function setState(nextState) {
    // Когда пользователь запрашивает изменение состояния,
    // помещаем новое значение в пару.
    pair[0] = nextState;
    updateDOM();
  }

  // Сохраняем пару для будущих рендеров
  // и подготовимся к следующему вызову хука.
  componentHooks[currentHookIndex] = pair;
  currentHookIndex++;
  return pair;
}

function Gallery() {
  // Каждый вызов useState() будет получать следующую пару.
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  function handleNextClick() {
    setIndex(index + 1);
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  // В этом примере не используется React,
  //поэтому вернем объект вместо JSX.
  return {
    onNextClick: handleNextClick,
    onMoreClick: handleMoreClick,
    header: `${sculpture.name} by ${sculpture.artist}`,
    counter: `${index + 1} of ${sculptureList.length}`,
    more: `${showMore ? 'Hide' : 'Show'} details`,
    description: showMore ? sculpture.description : null,
    imageSrc: sculpture.url,
    imageAlt: sculpture.alt,
  };
}

function updateDOM() {
  // Сбросить текущий индекс хука
  // перед рендерингом компонента.
  currentHookIndex = 0;
  let output = Gallery();

  // Обновить DOM, чтобы он соответствовал выходным данным.
  // Это та часть, которую React делает за вас.
  nextButton.onclick = output.onNextClick;
  header.textContent = output.header;
  moreButton.onclick = output.onMoreClick;
  moreButton.textContent = output.more;
  image.src = output.imageSrc;
  image.alt = output.imageAlt;
  if (output.description !== null) {
    description.textContent = output.description;
    description.style.display = '';
  } else {
    description.style.display = 'none';
  }
}

let nextButton = document.getElementById('nextButton');
let header = document.getElementById('header');
let moreButton = document.getElementById('moreButton');
let description = document.getElementById('description');
let image = document.getElementById('image');
let sculptureList = [
  {
    name: 'Sculpture 1 Name',
    artist: 'Sculpture 1 Artist',
    description: 'Sculpture 1 Description',
    url: 'https://example.com/sculpture1.jpg',
    alt: 'Sculpture 1 Description',
  },
  {
    name: 'Sculpture 2 Name',
    artist: 'Sculpture 2 Artist',
    description: 'Sculpture 2 Description',
    url: 'https://example.com/sculpture2.jpg',
    alt: 'Sculpture 2 Description',
  },
];

// Сделать интерфейс соответствующим начальному состоянию.
updateDOM();

Вам не нужно понимать это, чтобы использовать React, но вы можете найти полезную ментальную модель.

Состояние изолировано и приватно

Состояние является локальным для экземпляра компонента на экране. Другими словами, если вы рендерите один и тот же компонент дважды, каждая копия будет иметь полностью изолированное состояние. Изменение одного из них не повлияет на другой. В этом примере ранее компонент Gallery визуализируется дважды без каких-либо изменений в его логике.

import Gallery from './Gallery.js';

export default function Page() {
  return (
    <div className="Page">
      <Gallery />
      <Gallery />
    </div>
  );
}

Это то, что отличает состояние от обычных переменных, которые вы можете объявить в верхней части вашего модуля. Состояние не привязано к конкретному вызову функции или месту в коде, но оно «локально» для определенного места на экране. Мы отрендерили два компонента <Gallery />, поэтому их состояние сохраняется отдельно.

Также обратите внимание на то, что компонент Page ничего не «знает» о состоянии Gallery и даже о том, есть ли оно у него. В отличие от пропсов, состояние полностью приватно для компонента, объявляющего его. Родительский компонент не может его изменить. Это позволяет добавлять состояние к любому компоненту или удалять его, не затрагивая остальные компоненты. Что, если вы хотите, чтобы обе галереи синхронизировали свои состояния? Правильный способ сделать это в React — удалить состояние из дочерних компонентов и добавить его к их ближайшему общему родителю. Следующие несколько частей будут посвящены организации состояния одного компонента, но мы вернемся к этой теме в разделе "Обмен данными между компонентами".

Резюме

• Используйте переменную состояния, когда компоненту необходимо «запомнить» некоторую информацию между рендерами.
• Переменные состояния объявляются путем вызова хука useState.
• Хуки — это специальные функции, которые начинаются с use. Они позволяют вам «подключаться» к возможностям React, таким как состояние.
• Вызов хуков, включая useState, действителен только на верхнем уровне компонента или другого хука.
• Хук useState возвращает пару значений: текущее состояние и функцию для его обновления.
• Вы можете иметь более одной переменной состояния. Внутри React сопоставляет их по порядку.
• Состояние является приватным для компонента. Если вы рендерите его в двух местах, каждая копия получает свое состояние.

Содержание туториала по TypeScript Предположим, что у нас есть функция padLeft.

function padLeft(padding: number | string, input: string): string {
  throw new Error('Not implemented yet!');
}

Если padding является числом, оно будет рассматриваться как количество пробелов, которые мы хотим добавить перед input. Если padding является строкой, он должен просто добавлять padding перед input. Давайте попробуем реализовать логику, когда в padLeft передается padding как число.

function padLeft(padding: number | string, input: string) {
  return ' '.repeat(padding) + input;

  // Argument of type 'string | number' is not assignable to parameter of type 'number'.
  // Type 'string' is not assignable to type 'number'.

  // Аргумент типа 'string | number' не может быть присвоен параметру типа 'number'.
  // Тип 'string' не может быть присвоен типу 'number'.
}

TypeScript предупреждает нас, что добавление string | number в number может не дать нам того, что мы хотим, и это правильно. Другими словами, мы не проверяли явно, является ли padding числом, и не обрабатываем случай, когда это строка, так что давайте сделаем это.

function padLeft(padding: number | string, input: string) {
  if (typeof padding === 'number') {
    return ' '.repeat(padding) + input;
  }
  return padding + input;
}

Если не считать добавленных нами аннотаций типов, этот TypeScript код выглядит как JavaScript. Идея состоит в том, что система типов TypeScript направлена на то, чтобы максимально упростить написание JavaScript кода, без необходимости лезть вон из кожи, чтобы обеспечить безопасность типов. Хотя это может показаться не таким уж большим делом, на самом деле в этом коде скрывается много работы со стороны TypeScript. Подобно тому, как TypeScript анализирует значения во время выполнения с использованием статических типов, он накладывает анализ типов на конструкции потока управления во время выполнения JavaScript, такие как if/else, тернарные условия, циклы, проверки на истинность и т.д., которые могут влиять на эти типы. В нашей проверке if TypeScript видит typeof padding === 'number' и понимает это как особую форму кода, называемую защитой типа (type guard). TypeScript следует возможным путям выполнения, которые наши программы могут использовать для анализа наиболее конкретного возможного типа значения в данной позиции. Он рассматривает эти специальные проверки (называемые защитой типов) и присвоения, а процесс уточнения типов до более конкретных, чем объявленные, называется сужением (narrowing). Во многих IDE мы можем наблюдать за изменением этих типов, и мы даже будем делать это в наших примерах.

function padLeft(padding: number | string, input: string) {
  if (typeof padding === 'number') {
    return ' '.repeat(padding) + input;
    // при наведении курсора на padding => (parameter) padding: number
  }
  return padding + input;
  // в этом случае при наведении курсора на padding => (parameter) padding: string
}

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

Защитник типов typeof

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

• "string"
• "number"
• "bigint"
• "boolean"
• "symbol"
• "undefined"
• "object"
• "function"

Как мы видели в случае с padLeft, этот оператор довольно часто встречается в ряде библиотек JavaScript, и TypeScript может понимать его для сужения типов в разных ветках кода. В TypeScript проверка значения, возвращаемого typeof, является защитой типа. Поскольку TypeScript понимает как typeof работает с разными значениями, он знает о некоторых причудах в JavaScript. Например, обратите внимание, что в приведенном выше списке typeof не возвращает строку null. Рассмторим следующий пример:

function printAll(strs: string | string[] | null) {
  if (typeof strs === 'object') {
    for (const s of strs) {
      // Object is possibly 'null'.
      // Возможно, объект 'null'.
      console.log(s);
    }
  } else if (typeof strs === 'string') {
    console.log(strs);
  } else {
    // ничего не делать
  }
}

В функции printAll мы пытаемся проверить, является ли strs объектом, чтобы узнать, является ли он типом массива (сейчас самое время подчеркнуть, что массивы являются объектными типами в JavaScript). Но оказывается, что в JavaScript typeof null на самом деле вернет "object"! Это одна из тех досадных исторических случайностей. Пользователи с достаточным опытом могут не удивиться, но не все сталкивались с этим в JavaScript. К счастью, TypeScript сообщает нам, что strs был сужен только до string[] | null вместо просто string[].

Проверка на истинность (Truthiness narrowing)

В JavaScript мы можем использовать любое выражение в условных выражениях, операторах &&, ||, операторах if, логических отрицаниях (!) и т.д. Например, операторы if не ожидают, что их условие всегда будет иметь логический тип.

function getUsersOnlineMessage(numUsersOnline: number) {
  if (numUsersOnline) {
    return `There are ${numUsersOnline} online now!`;
  }
  return "Nobody's here. :(";
}

В JavaScript такие конструкции, как if, сначала "приводят" свои условия к булевым значениям, а затем выбирают свои ответвления в зависимости от того, является ли результат истинным или ложным. Такие значения, как

• 0
• NaN
• "" (пустая строка)
• 0n (bigint версия нуля)
• null
• undefined

приводятся к false, а другие значения приводятся к true. Вы всегда можете привести значения к логическим значениям, применив к ним функцию Boolean или используя более короткое двойное логическое отрицание. (Последний имеет преимущество - TypeScript выводит узкий литеральный логический тип true, в то время как в первом варианте выводится логический тип boolean.)

// оба варианта имеют значение 'true'
Boolean('hello'); // type: boolean, value: true
!!'world'; // type: true, value: true

Довольно популярно использовать такое поведение, особенно для защиты от таких значений, как null или undefined. В качестве примера попробуем использовать его для нашей функции printAll.

function printAll(strs: string | string[] | null) {
  if (strs && typeof strs === 'object') {
    for (const s of strs) {
      console.log(s);
    }
  } else if (typeof strs === 'string') {
    console.log(strs);
  }
}

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

TypeError: null is not iterable

// TypeError: null не перечисляемый

Имейте в виду, однако, что проверка истинности примитивов часто может быть подвержена ошибкам. В качестве примера рассмотрим другой вариант printAll.

function printAll(strs: string | string[] | null) {
  // !!!!!!!!!!!!!!!!
  //  Не делайте так!
  //  Продолжайте чтение
  // !!!!!!!!!!!!!!!!
  if (strs) {
    if (typeof strs === 'object') {
      for (const s of strs) {
        console.log(s);
      }
    } else if (typeof strs === 'string') {
      console.log(strs);
    }
  }
}

Мы обернули все тело функции в проверку на истинность, но у такой реализации есть недостаток: мы больше не можем правильно обрабатывать случай пустой строки. И также рассмотрим пример с !.

function multiplyAll(
  values: number[] | undefined,
  factor: number
): number[] | undefined {
  if (!values) {
    return values;
  } else {
    return values.map((x) => x * factor);
  }
}

Сужение при проверке на равенство (Equality narrowing)

TypeScript также использует операторы switch и проверки на равенство, такие как ===, !==, == и != для сужения типов. Например:

function example(x: string | number, y: string | boolean) {
  if (x === y) {
    // Мы можем вызвать любой строковый метод у 'x' или 'y'.
    x.toUpperCase();
    // (method) String.toUpperCase(): string

    y.toLowerCase();
    // (method) String.toLowerCase(): string
  } else {
    console.log(x);
    // (parameter) x: string | number

    console.log(y);
    // (parameter) y: string | boolean
  }
}

Когда мы проверили, что x и y равны в приведенном выше примере, TypeScript узнал, что их типы также должны быть равны. Поскольку string — это единственный общий тип, который могут принимать как x, так и y, TypeScript знает, что x и y должны быть строкой в первой ветви. Также работает проверка конкретных литеральных значений (в отличие от переменных). В разделе Проверка на истинность мы написали функцию printAll, которая была подвержена ошибкам, потому что случайно неправильно обрабатывала пустые строки. Вместо этого мы могли бы сделать специальную проверку, чтобы заблокировать значения null, и TypeScript по-прежнему корректно удалял бы null из типа strs.

function printAll(strs: string | string[] | null) {
  if (strs !== null) {
    if (typeof strs === 'object') {
      for (const s of strs) {
        // (parameter) strs: string[]
        console.log(s);
      }
    } else if (typeof strs === 'string') {
      console.log(strs);
      // (parameter) strs: string
    }
  }
}

Cлабые проверки равенства в JavaScript с помощью == и != также корректно сужаются. Если вы не знакомы, проверка того, действительно ли что-то == null, не только проверяет, является ли это именно значением null, но также проверяет, является ли оно потенциально undefined. То же самое относится и к == undefined: он проверяет, является ли значение null или undefined.

interface Container {
  value: number | null | undefined;
}

function multiplyValue(container: Container, factor: number) {
  // Удаляем 'null' и 'undefined' из типа.
  if (container.value != null) {
    console.log(container.value);
    // (property) Container.value: number

    // Теперь можно безопасно умножить 'container.value'.
    container.value *= factor;
  }
}

Сужение типов с оператором in

В JavaScript есть оператор для определения наличия у объекта свойства с указанным именем: оператор in. TypeScript учитывает это как способ сузить число возможных типов. Например, кодом: "value" in x, где "value" — строковый литерал, а x — тип объединения. Ветвь с true сужает типы x, которые имеют либо необязательное, либо обязательное свойство value, а ветвь false сужает типы, которые имеют необязательное или отсутствующее свойство value.

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    return animal.swim();
  }

  return animal.fly();
}

Повторим, что необязательные свойства будут существовать в обеих ветках, например, человек может и плавать (swim), и летать (fly) (с соответствующим снаряжением):

type Fish = { swim: () => void };
type Bird = { fly: () => void };
type Human = { swim?: () => void; fly?: () => void };

function move(animal: Fish | Bird | Human) {
  if ('swim' in animal) {
    animal;
    // (parameter) animal: Fish | Human
  } else {
    animal;
    // (parameter) animal: Bird | Human
  }
}

Сужение типов с instanceof

В JavaScript есть оператор для проверки того, является ли значение «экземпляром» другого значения. В JavaScript x instanceof Foo проверяет, содержится ли Foo.prototype в цепочке прототипов x. Более подробно вернемся к этой теме, когда перейдем к классам. Как вы могли догадаться, instanceof также является защитой типов, а TypeScript сужает типы в ветках, защищенных instanceof.

function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toUTCString());
    //(parameter) x: Date
  } else {
    console.log(x.toUpperCase());
    // (parameter) x: string
  }
}

Присваивания (Assignments)

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

let x = Math.random() < 0.5 ? 10 : 'hello world!';

let x: string | number;
x = 1;

console.log(x);
// let x: number

x = 'goodbye!';

console.log(x);
// let x: string

Обратите внимание, что каждое из этих присвоений допустимо. Несмотря на то, что наблюдаемый тип x изменился на number после нашего первого присваивания, мы по-прежнему могли присвоить x строку. Это связано с тем, что объявленный тип x — тип, с которого начинается x — это string | number, а присваиваемость всегда проверяется по объявленному типу. Если бы мы присвоили x значение boolean, мы бы увидели ошибку, поскольку это не было частью объявленного типа.

let x = Math.random() < 0.5 ? 10 : 'hello world!';

let x: string | number;
x = 1;

console.log(x);
// let x: number

x = true;
// Type 'boolean' is not assignable to type 'string | number'.
// Тип 'boolean' нельзя присвоить к типу 'string | number'.

console.log(x);
// let x: string | number

Анализ потока управления

До этого момента мы рассмотрели несколько основных примеров того, как TypeScript сужает типы ветках. Но на самом деле происходит нечто большее, чем просто обход каждой переменной и поиск защитников типов в if, while, условных выражениях и т.д. Например.

function padLeft(padding: number | string, input: string) {
  if (typeof padding === 'number') {
    return ' '.repeat(padding) + input;
  }
  return padding + input;
}

padLeft возвращает значение из своего первого блока if. TypeScript смог проанализировать этот код и увидеть, что остальная часть тела (return padding + input;) недостижима в случае, когда padding является числом. В результате удалось удалить number из типа padding (сужение от string | number до string) для остальной части функции. Этот анализ кода, основанный на достижимости, называется анализом потока управления (control flow analysis), и TypeScript использует этот анализ потока для сужения типов по мере того, как он сталкивается с защитой типов и присваиваниями. Когда переменная анализируется, поток управления может разделяться и объединяться снова и снова, и можно наблюдать, что эта переменная имеет разный тип в каждой точке.

function example() {
  let x: string | number | boolean;

  x = Math.random() < 0.5;

  console.log(x);
  // let x: boolean

  if (Math.random() < 0.5) {
    x = 'hello';
    console.log(x);
    // let x: string
  } else {
    x = 100;
    console.log(x);
    // let x: number
  }

  return x;
  // let x: string | number
}

Использование предикатов типа (type predicates)

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

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

pet is Fish — наш предикат типа в этом примере. Предикат принимает форму parameterName is Type, где parameterName должно быть именем параметра из текущей сигнатуры функции. Каждый раз, когда isFish вызывается с некоторой переменной, TypeScript сужает эту переменную до этого конкретного типа, если исходный тип совместим.

// Теперь вызовы 'swim' и 'fly' - ок.
let pet = getSmallPet();

if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

Обратите внимание, что TypeScript не только знает, что pet — это Fish в ветке if; он также знает, что в другой ветке у вас нет Fish, поэтому у вас должна быть Bird. Вы можете использовать защиту типа isFish для фильтрации массива Fish | Bird и получить массив состоящий из Fish:

const zoo: (Fish | Bird)[] = [getSmallPet(), getSmallPet(), getSmallPet()];
const underWater1: Fish[] = zoo.filter(isFish);
// или, тоже самое
const underWater2: Fish[] = zoo.filter(isFish) as Fish[];

// Предикат может нуждаться в повторении для более сложных примеров.
const underWater3: Fish[] = zoo.filter((pet): pet is Fish => {
  if (pet.name === 'sharkey') return false;
  return isFish(pet);
});

Исключающие объединения (discriminated unions)

Большинство примеров, которые мы рассмотрели ранее, были сосредоточены на сужении одиночных переменных с помощью простых типов, таких как string, boolean и number. Однако, большую часть времени в JavaScript мы будем иметь дело с немного более сложными структурами. Представим, что мы пытаемся описать такие фигуры, как круги и квадраты. Круги отслеживают свои радиусы, а квадраты отслеживают длины своих сторон. Мы будем использовать поле под названием kind, чтобы указать, с какой формой мы имеем дело. Вот первая реализация Shape.

interface Shape {
  kind: 'circle' | 'square';
  radius?: number;
  sideLength?: number;
}

Обратите внимание, что мы используем объединение типов строковых литералов: "circle" и "square". Используя "circle" | "square" вместо string, мы можем избежать проблем с орфографическими ошибками.

function handleShape(shape: Shape) {
  // "rect" не входит в "circle"` или `"square"
  if (shape.kind === 'rect') {
    // This condition will always return 'false' since the types '"circle" | "square"' and '"rect"' have no overlap.
    // Это условие всегда будет возвращать 'false', так как типы '"circle" | "square"' и '"rect"' не пересекаются.
    // ...
  }
}

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

function getArea(shape: Shape) {
  return Math.PI * shape.radius ** 2;
  // Object is possibly 'undefined'.
  // Объект, возможно, 'undefined'.
}

В strictNullChecks это выдает ошибку, что уместно, поскольку радиус может быть не определен. Но что, если мы выполним соответствующие проверки свойства kind?

function getArea(shape: Shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
    // Object is possibly 'undefined'.
    // Объект, возможно, 'undefined'.
  }
}

И здесь TypeScript не знает, что делать. Мы достигли точки, когда знаем о наших значениях больше, чем средство проверки типов. Мы могли бы попытаться использовать ненулевое утверждение (! после shape.radius), чтобы сказать, что радиус определенно присутствует.

function getArea(shape: Shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius! ** 2;
  }
}

Но это выглядит не очень. Нам пришлось немного покричать на средство проверки типов с этими ненулевыми утверждениями (!), чтобы убедить его, что shape.radius был определен, но эти утверждения подвержены ошибкам, если мы начнем менять код. Кроме того, за пределами strictNullChecks мы все равно можем случайно получить доступ к любому из этих полей (поскольку предполагается, что необязательные свойства всегда присутствуют при их чтении). Мы определенно можем сделать лучше.

Проблема с этой реализацией Shape заключается в том, что средство проверки типов не может узнать, присутствуют ли radius или sideLength на основе свойства kind. Нам нужно сообщить то, что мы знаем, системе проверки типов. Имея это в виду, давайте еще раз обратимся к определению Shape.

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

type Shape = Circle | Square;

Здесь мы правильно разделили Shape на два типа с разными значениями свойства kind, но radius и sideLength объявлены как обязательные свойства в соответствующих типах. Давайте посмотрим, что здесь происходит, когда мы пытаемся получить доступ к радиусу Shape.

function getArea(shape: Shape) {
  return Math.PI * shape.radius ** 2;
  // Property 'radius' does not exist on type 'Shape'.
  // Свойство 'radius' не существует в типе 'Square'.
}

Как и в случае с нашим первой реализацией Shape, это все еще ошибка. Когда радиус был необязательным, мы получили ошибку (с включенной strictNullChecks), потому что TypeScript не мог определить, присутствует ли свойство. Теперь, когда Shape является объединением, TypeScript сообщает нам, что Shape может быть квадратом, а у квадратов не определен радиус! Обе интерпретации верны, но только объединенный тип Shape вызовет ошибку независимо от того, как настроен strictNullChecks. Но что, если мы попытаемся снова проверить свойство kind?

function getArea(shape: Shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
    // (parameter) shape: Circle
  }
}

Мы избавилась от ошибки. Когда каждый тип в объединении содержит общее свойство с литеральными типами, TypeScript считает это исключающим объединением (discriminated union) и может сузить круг членов объединения. В данном случае это общее свойство было kind (это то, что считается дискриминантным свойством Shape). Проверка того, является ли свойство kind = "circle", избавляет от всех типов в Shape, которые не имеют свойства kind с типом "circle". Эта суженный shape до типа Circle. Та же проверка работает и с операторами switch. Теперь мы можем попытаться написать полную реализацию getArea без каких-либо ! ненулевых утверждений.

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    // (parameter) shape: Circle

    case 'square':
      return shape.sideLength ** 2;
    // (parameter) shape: Square
  }
}

Передача правильной информации в TypeScript — что Circle и Square на самом деле были двумя отдельными типами с определенными полями kind — была крайне важна. Это позволяет нам писать типобезопасный код TypeScript. Кроме того, попробуйте поиграть с приведенным выше примером и удалить некоторые из возвращаемых ключевых слов. Вы увидите, что проверка типов может помочь избежать ошибок при случайном переходе через разные ветки в операторе switch. Исключающие объединения полезны не только для разделения кругов и квадратов. Они хороши для представления любой схемы обмена сообщениями в JavaScript, например, при отправке сообщений по сети (связь клиент-сервер) или для определения мутаций в библиотеках управления состоянием.

Тип never

При сужении можно уменьшить варианты объединения до такой степени, что можно убрать все возможные варианты и ничего не останется. В таких случаях TypeScript будет использовать тип never для представления состояния, которого не должно быть.

Исчерпывающие проверки (Exhaustiveness checking)

Тип never присваивается каждому типу; однако никакому типу нельзя присвоить значение never (кроме самого never). Это означает, что вы можете использовать сужение и полагаться на never для выполнения исчерпывающих проверок в операторе switch. Например, добавление значения по умолчанию к нашей функции getArea, которая пытается присвоить форме значение never, будет выполняться, если все возможные случаи не были обработаны.

type Shape = Circle | Square;

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Добавление нового члена в объединение Shape вызовет ошибку TypeScript:

interface Triangle {
  kind: 'triangle';
  sideLength: number;
}

type Shape = Circle | Square | Triangle;

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
      // Type 'Triangle' is not assignable to type 'never'.
      // Тип 'Triangle' нельзя присвоить типу 'never'.
      return _exhaustiveCheck;
  }
}