Использование TypeScript с React

внешний интерфейс TypeScript

оригинал:Using TypeScript with React
Автор: Саймон Нотт
Переводчик: жирные овцы
В целях обеспечения читабельности статьи в этой статье используется вольный перевод.
Прочитайте полный текст примерно за 13 минут.

Эта статья основана на моем прошлом вReact JS & React Native Bonn Meetupречь, приведенная выше. Цель данной статьи – ответить на следующие вопросы:

  • Что такое TypeScript?
  • Как использовать TypeScript с React?
  • Почему мы должны (не) использовать TypeScript?

Это мое первое публичное выступление за пределами школы, и очень приятно, что оно завершилось успешно, спасибо всем, кто присоединился к нам! 😁 Выступления — одно из моих любимых занятий, и я надеюсь, что в будущем выступлю еще.

Что такое TypeScript?

typescriptlang.orgTypeScript (сокращенно TS) объясняется следующим образом:

TypeScript — это типизированный надмножество JavaScript, который компилируется в обычный JavaScript.

Описание выше может быть истолковано как:

  1. TypeScript — это форма JavaScript, связанная сТипыязык. Основное отличие состоит в том, что TypeScript — это язык со статической типизацией, а JavaScript — с динамической типизацией.
  2. TypeScript можно скомпилировать в обычный JavaScript, а затем выполнить в такой среде, как браузер или Node.js.
  3. как JavaScriptсуперсетСредства TypeScript добавит новые функции на основе JavaScript, сохраняя при этом строгие нормы и базовую совместимость с JS.

Давайте посмотрим на каштан, поскольку TS является надмножеством JS, следующий код действителен для обоих языков:

function add(a, b) {
  return a + b;
}

const favNumber = add(31, 11);

Мы видели, что особенностью TS является его система типов. Затем мы добавляем объявление типа к приведенному выше коду, который сгенерирует следующий код, соответствующий спецификации TS, но не соответствующий спецификации JS:

function add(a: number, b: number): number {
  return a + b;
}

const favNumber: number = add(31, 11);

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

использоватьtscПроходят инструменты командной строки для компиляции TypeScript: проверка кода -> все проверки пройдены -> вывод простого JavaScript. Выходной код очень похож на исходный код, только без аннотаций типов.

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

function add(a: number, b: number) {
  return a + b;
}

const favNumber = add(31, 11);

(Разница от предыдущего куска кода состоит в том, что значение возвращаемого функции не имеет аннотации типа.)

Допустимые примитивные типы в TS:boolean,string,number,Symbol,null,undefinedа такжеBigIntтипа; такжеvoidтип, используемый для указания, что функция ничего не возвращает; иFunctionтипа и, как правило, сArray<T>Представлятьstring[]илиnumber[]Для этого требуется аннотировать переменную типа содержимого массива. Так же какReactElement,HTMLInputElementтак же какExpress.AppЭто типы, допустимые только в определенных средах развертывания или с определенными зависимостями.

Самое интересное в TS то, что вы можете определять свои собственные типы. Давайте рассмотрим некоторые способы моделирования вашего домена. Первый заключается в использованииinterfaceКлючевые слова определяют ваши объекты:

interface User {
  firstName: string;
  lastName: string;
  age: number;
  state: UserState;
}

Вы также можете определитьenums:

enum UserState {
  ACTIVE,
  INACTIVE,
  INVITED,
}

TypeScript даже поддерживает наследование:

interface FunkyUser extends User {
  isDancing: boolean;
}

Typeycript также имеет много продвинутых типов, таких как типы объединений, которые можно использовать вместо типов Enum. Разница в том, что она больше похоже на то, как JavaScript написан.

type UserState =
  "active" |
  "inactive" |
  "invited";

const correctState: UserState = "active"; // ✅
const incorrectState: UserState = "loggedin"; // ❌ TypeError

Когда речь заходит о проверке типа, TypeScript не проверяет прототип цепь или другие унаследованные способы, он проверяет только идентичность типа свойства и обрабатывает свойства объекта:

const bugs: User = {
  firstName: "Bugs",
  lastName: "Bunny",
  age: "too old", // TypeError: expected `number` but got `string`
  state: UserState.ACTIVE,
}

Вы, конечно, можете использовать в TypeScriptclass, я не удержу вас от этого, но будьте осторожны: я позже объясню, почему вам это не нужно. Посмотрите на каштан ниже:

class JavaLover implements User {
  private firstName: string;
  private lastName: string;
  private age: number;
  private state: UserState;
  
  getOpinion() {
    return [ "!!JAVA!1!" ];
  }
}

Ранее мы рассмотрели некоторый базовый код TypeScript для общего понимания, теперь давайте посмотрим, как использовать React.

Как использовать TypeScript с React?

Поскольку Babel 7 поддерживает встроенный TypeScript, интегрировать его в процесс сборки несложно. Я по-прежнему рекомендую ознакомиться с документацией по инструменту сборки, в большинстве из которых есть хорошо написанные практические руководства по настройке TypeScript.

После настройки процесса сборки вы можете использовать TypeScript в своих компонентах. Ниже приведен простой компонент React-Native, который принимает TodoItem и функцию обратного вызова и отображает сообщение Todo.

import * as React from "react";
import { View, Text, CheckBox } from "react-native";

interface TodoItem {
  id: string;
  name: string;
  isCompleted: boolean;
}

interface TodoListItemProps {
  item: TodoItem;
  onComplete: (id: string) => void;
}

function TodoListItem(props: TodoListItemProps) {
  const { item, onComplete } = props;
  return (
    <View>
      <Text>{item.name}</Text>
      <CheckBox isChecked={item.isCompleted} onClick={state => { onComplete(item.id); }} />
    </View>
  );
}

Поскольку React по своей природе является чистым JavaScript, его можно написать как чистый JavaScript. вам просто нужно использоватьinterface(ВидетьTodoListItemPropsизinterfaceопределение), чтобы определить ваш компонентpropsstruct и используйте только что определенныйTodoListItemPropsТипы для определения компонентовpropsТип параметра. Вам не нужно указывать тип возвращаемого значения (на самом деле это типJSX.Element), как это можно сделать из типа выражения, возвращаемого компонентом.

Несмотря на то, что JSX не является частью спецификации JavaScript, TypeScript по-прежнему может выполнять проверку типов, что позволяет проверять реквизиты, передаваемые в компоненты.

Вы также можете использовать TypeScript с ReactclassAPI используются в сочетании с:

import * as React from "react";

interface TimerState {
  count: number;
}

class Timer extends React.Component<{}, TimerState> {
  
  state: TimerState = {
    count: 0
  }

  timerId: number | undefined = undefined;

  componentDidMount() {
    this.timerId = setInterval(
      () => {
        this.setState(
          state => ({
            count: state.count + 1
          })
        );
      },
      1000
    );
  }

  componentWillUnmount() {
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }

  render() {
    return (
      <p>Count: {this.state.count}</p>
    )
  }
}

Когда вы пишете класс, вы передаете параметры типа в расширяемый класс.React.Componentсередина. Первый — это пустой PROPS в компонентах предыдущего примера.{}Пустой объект); второй параметр универсального типа — это состояние компонента, в данном случае поле счетчика, содержащее только числа. Вы также обнаружите, что инициализация используется здесь какundefinedполя экземпляраtimerId, поэтому его тип объявлен какnumber | undefined, а значит может бытьnumberилиundefinedТипы.

Как видите, использовать TypeScript с React очень просто и не требует никаких церемоний. В принципе, этоprop-typesБолее мощная альтернатива, поскольку она поддерживает более сложные типы и может также использовать простой код JS. В то же время TypeScript может обеспечивать проверку во время компиляции иprop-typesДействительно только в среде разработки.

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

Почему мы должны (не) использовать TypeScript?

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

Причины не использовать TypeScript

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

«TypeScript великолепен, и, наконец, наша разработка на Java может выполняться во внешней среде».

Это выглядит значимым, но на самом деле вредно. Это правильно, разработчики Java привыкли к отличным функциям, таким как система типа, класс, интерфейс, но TyslicScript, все еще очень привлекательны для них. Однако, если Java (или другой язык, который глубоко ориентирован на объектно-ориентированные программированные), разработчики, переходят на написание Teamscript, он не понимает глубоко укоренившаяся разница между Java и JavaScript, который может иметь большую проблему. ПОМНИТЕ ОДИН: ОДИН: должен ли ваш код JavaScript Compical Complet Complet Complyction,不Это изменит свое поведение во время выполнения. Как только он работает, больше нет типа информации, которая является его преимуществом, но и его痛点. JavaScript реализует функцию динамической типизации и принудительной типизации через наследование цепочки прототипов, что позволяет ему иметь много новых функций и возможностей, и он недалеко ушел от Java. Имейте это в виду при переходе от разработки Java к разработке TypeScript.

Почему TypeScript все еще помогает мне и как?

Добавление аннотаций типов в ваш проект — отличный способ документировать структуру вашего кода, он дает возможность аннотировать структуру передаваемых данных. TypeScript также является «машиночитаемым», что означает, что он может быть выполнен машиной! Это обеспечивает мощную поддержку редактора (попробуйте VS Code, онdiao bao le! ), что упрощает процесс рефакторинга кода и улучшает статические проверки безопасности.

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

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

Категории