Что такое проверка типа?
Проверка типов - это процесс проверки типов данных либо во время выполнения (динамически), либо во время компиляции (статический). Это необходимо для того, чтобы программа была успешно выполнена.
Проверка статического типа - это когда тип переменной известен во время компиляции. Это означает, что некоторые языки требуют инициализации переменных типом данных.
Языки статического типа:
- 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 поможет быстрее и раньше выявить эти ошибки.