En React, la verificación de tipos estáticos se vuelve cada vez más compleja. Por lo tanto, se vuelve importante usar la verificación de tipo estático. Se prefiere principalmente para evitar fallos y errores. Dado que la biblioteca de reacción está construida sobre JavaScript. Es dinámico, débilmente tipificado y vagamente tipificado. La verificación de tipo estático se utiliza para verificar el tipo de estado, variables y funciones en reaccionar.
En reaccionar, hay dos formas de implementar la verificación de tipo estático
- Caudal
- TypeScript
Hay diferentes ventajas de usar la verificación de tipo estático de la siguiente manera:
- Identificación de errores de tipo antes del tiempo de ejecución
- Flujo de trabajo mejorado debido a la función de autocompletar
- Detección de errores en etapa temprana
- Código fácil de leer
Preferimos usar el flujo porque es liviano y está desarrollado por Facebook.
Vamos a crear una aplicación de reacción para verificar la verificación de tipo estático:
Creación de la aplicación React
Paso 1 : Cree una aplicación React usando el siguiente comando:
npx create-react-app example
Paso 2 : después de crear la carpeta de su proyecto, es decir, un ejemplo, muévase a ella con el siguiente comando:
cd example
Paso 3: ahora desde el directorio raíz de su proyecto en la terminal, ejecute el siguiente comando
npm install --save-dev flow-bin
Esto agregará flujo a nuestra aplicación de reacción.
Package.json: después de la instalación, agregue Flow en la sección de secuencias de comandos del archivo package.json. El archivo será así:
Package.json
{
"name": "example",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"flow": "flow"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"flow-bin": "^0.173.0"
}
}
Paso 4: luego ejecuta este comando desde una terminal
npm run flow init
Estructura del proyecto: creará un archivo de configuración como se muestra en la estructura de carpetas a continuación
estructura de carpetas
Paso 5: Reemplace el contenido del archivo .flowconfig con el siguiente
[ignore] .*/node_modules/.* .*/src/registerServiceWorker\.js .*/src/index\.js .*\.test\.js [include] [libs] [lints] [options] all=true [strict]
Ahora haga App.js como a continuación con un ejemplo de verificación de tipo estático.
App.js
// @flow
function calculateSum(a, b) {
return a + b;
}
calculateSum(7, 9);
calculateSum(7, '9');
Paso a ejecutar: Ahora desde la terminal ejecutar
npm run flow
Salida: De esta manera hacemos verificación de tipo estático en reaccionar.
Producción