Написано Пьеро Боррелли ✏

Если вы разработчик программного обеспечения – особенно если вы пишете JavaScript – тогда вы, вероятно, слышали о TypeScript Анкет Сотни курсов, дискуссии на форуме и переговоров были созданы в отношении этой технологии, и интерес все еще растет.

TypeScript – это строгий типичный суперсет JavaScript, разработанный Microsoft. Он в основном начинается с обычной кодовой базы JavaScript, которую мы все знаем и компилируются в файлы JavaScript, добавляя несколько очень крутых функций по пути.

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

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

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

Интеграция TypeScript с другими технологиями

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

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

Реакт

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

Как только все будет настроено, мы можем начать исследовать нашу новую интеграцию TypeScript + React.

Напечатанные функциональные компоненты

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

import * as React from 'react'; // to make JSX compile

const sayHello: React.FunctionComponent<{
  name: string;
}> = (props) => {
  return 
Hello {props.name} !
;
};

export default sayHello;

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

Мы также можем определить реквизит, упомянутые выше, по -другому: определяя интерфейс с использованием TypeScript, указав тип для каждого из них.

interface Props {
  name: string
};

const sayHello: React.FunctionComponent = (props) => {
  return 
{props.name}
;
};

Также обратите внимание, что использование Реагировать. FunctionComponent позволяет TypeScript понимать контекст компонента React и увеличивать наши пользовательские реквизиты с помощью предоставленных по умолчанию реквизита, таких как дети.

Набрали классовые компоненты

«Старый путь» определения компонентов в React – это определение их как классов. В этом случае мы можем не только управлять реквизитами, но и государством (даже если все изменилось с момента последнего выпуска React 16 )

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

import * as React from 'react';

type Props {}
interface State {
  seconds: number;
};
export default class Timer extends React.Component {
  state: State = {
    seconds: 0
  };
  increment = () => {
    this.setState({
      seconds: (this.state.seconds + 1)
    });
  };
  decrement = () => {
    this.setState({
      seconds: (this.state.seconds - 1)
    });
  };
  render () {
    return (
      
 
The current time is {this.state.seconds}
 
    );
  }
}

Конструктор

Когда дело доходит до функции конструктора, вы должны передать свои реквизиты (даже если их нет), а TypeScript потребует от вас передачи их в супер Функция конструктора.

Однако при выполнении вашего супер Позвоните в строгий режим TypeScript, вы получите ошибку, если вы не предоставите каких -либо спецификаций типа. Это потому, что новый класс будет создан с новым конструктором, и TypeScript не будет знать, какие параметры ожидать.

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

export class Sample extends Component {
  constructor(props) { // ️doesn't work in strict mode
    super(props)
  }
}

Таким образом, мы должны быть явными в отношении типа наших реквизитов:

export class Sample extends Component {
  constructor(props: MyProps) {
    super(props)
  }
}

Реквизит по умолчанию

Свойства по умолчанию позволят вам указать значения по умолчанию для ваших реквизитов. Здесь мы можем увидеть пример:

import * as React from 'react';

interface AlertMessageProps {
  message: string;
}

export default class AlertMessage extends React.Component {
  static defaultProps: AlertMessageProps = {
    message: "Hello there"
 };

  render () {
    return 
{this.props.message}
;
  }
}

Контекст печати

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

API C Ontext предоставляет подход, чтобы избежать необходимости передавать данные на все уровни дерева. Давайте посмотрим пример этого, используя как JavaScript, так и TypeScript:

JavaScript

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Using a Provider to pass the current theme to the tree below.
    return (
      
        
      
    );
  }
}

// Middle component doesn't need to pass our data to its children anymore
function Toolbar(props) {
  return (
    

      
    
  );
}
// React here will find the closest theme Provider above and use its value("dark")
class ThemedButton extends React.Component {
  // contextType to read the current theme context
  static contextType = ThemeContext;
  render() {
    return ;
  }
}

Машинопись

Использование этой функции с TypeScript просто означает ввод каждого экземпляра контекста:

import React from 'react';

// TypeScript will infere the type of this properties automatically
export const AppContext = React.createContext({ 
  lang: 'en',
  theme: 'dark'
});

Мы также увидим полезные сообщения об ошибках, доступные в этом случае:

const App = () => {
  return 
    

  
}

Набрать пользовательские крючки

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

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

import React, { useState, useEffect } from 'react';

type Hook = (friendID: number) => boolean;

// define a status since handleStatusChange can't be inferred automatically
interface IStatus {
  id: number;
  isOnline: boolean;
}

// take a number as input parameter
const useFriendStatus: Hook = (friendID) => {
  // types here are automatically inferred
  const [isOnline, setIsOnline] = useState(null);

function handleStatusChange(status: IStatus) {
  setIsOnline(status.isOnline);
}
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  return isOnline;
}

Полезные ресурсы

Здесь я собрал для вас список полезных ресурсов, которые вы можете проконсультироваться, если решили начать использовать TypeScript с React:

• Официальные документы для типа
• Компоненты компонентов React с использованием TypeScript
• Последние обновления React
• Руководство для новичков по типографии

Вывод

Я твердо верю, что TypeScript будет некоторое время. Тысяча разработчиков учатся использовать его и интегрировать его в свои проекты, чтобы улучшить их. В нашем случае мы узнали, как этот язык может быть отличным компаньоном, чтобы написать лучше, более управляемые, легкие для чтения приложения React!

Для получения дополнительных статей, подобных этому, пожалуйста, следуйте за моим Twitter Анкет

Примечание редактора: Видите что -то не так с этим постом? Вы можете найти правильную версию Здесь Анкет

Plug: Logrocket, DVR для веб -приложений

Logrocket это инструмент регистрации фронта, который позволяет вам воспроизводить проблемы, как будто они произошли в вашем собственном браузере. Вместо того, чтобы догадаться, почему возникают ошибки, или просить пользователей экрана и журнала дамп, Logrocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от фреймворта, и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ngrx/Store. В дополнение к журналам Redux и состоянию регистрации журналы консоли Logrocket записывают, ошибки JavaScript, StackTraces, сетевые запросы/ответы с заголовками + BODES, метаданные браузера и пользовательские журналы. Он также приказывает DOM записывать HTML и CSS на странице, воссоздавая видеопроблемные видео даже самых сложных одностраничных приложений. Попробуйте бесплатно Анкет

Пост Как правильно писать напечатанные компоненты React с TypeScript появился первым на Logrocke Blog .

Оригинал: “https://dev.to/bnevilleoneill/how-to-write-correctly-typed-react-components-with-typescript-32p1”