Что такое проверка типа?

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

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

Языки статического типа:

  • C
  • C++
  • C#
  • Ява

Гораздо проще обнаружить ошибки раньше, потому что ваша программа не сможет компилироваться.

Проверка динамического типа - это когда тип переменной известен во время выполнения.

Языки динамического типа:

  • JavaScript
  • Python
  • Рубин
  • Lua

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

Что такое React PropTypes?

В React Native вы можете выполнять проверку типов с помощью PropTypes. Вы используете их, присваивая тип данных реквизитам, которые передаются в компоненты.

Пример использования PropTypes:

import * as React from ‘react’;
 import { Text, View } from ‘react-native’;
 import PropTypes from ‘prop-types’;
 
 export default class HelloWorld extends React.Component {
    render() {
       return (
          <View>
             <Text>
             {this.props.helloWorld}
             </Text>
          </View>
      );
    }
 }
 
 HelloWorld.propTypes = {
    helloWorld: PropTypes.string,
 }

HelloWorld PropType имеет значение string. Если в компонент будет передана неправильная опора, будет выдано сообщение об ошибке или предупреждение.

Как я могу их использовать?

Первый шаг - установить пакет prop-types, предоставляемый React.

npm install — save prop-types

OR

yarn add prop-types

После добавления пакета в ваш проект мы можем импортировать PropTypes в ваш компонент .js файл. Вверху файла import prop-types, как показано ниже.

import { PropTypes } from ‘prop-types’;

Пришло время добавить PropTypes к вашему компоненту.

ComponentName.propTypes = { 
   propName: PropTypes, // Just a template
   name: PropTypes.string,  // String PropType
   age: PropTypes.number,   // Number
   isWorking: PropTypes.bool // Boolean
}

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

Вывод

Типы опор могут пригодиться, чтобы предотвратить передачу неправильного типа данных в качестве опоры. Я не могу сосчитать, сколько раз я передавал Object, когда он должен был быть массивом, или наоборот. Добавление PropTypes поможет быстрее и раньше выявить эти ошибки.