Tengo un proyecto React.JS que usa un 'tema' personalizado con componentes de interfaz de usuario. Este tema también proporciona scripts de compilación (configuración de paquete web, configuraciones de babel, etc.).
Quiero empezar a usar Flow en este proyecto. Instalé los paquetes npm necesarios y agregué flow a los ajustes preestablecidos de babel, luego agregué props = {mytestprop: string} a una de mis clases React`.
¡Webpack compiló mi código con éxito, pero las sugerencias de tipo no se eliminaron! Por supuesto, el navegador no pudo ejecutar este código; cuando intento ejecutarlo, genera ReferenceError: string is not defined .
La lista actual de ajustes preestablecidos de .babelrc es: ["es2015", "react", "stage-2", "flow"] . Estoy seguro de que esta es la lista real utilizada por babel porque si elimino cualquiera de los primeros 3 ajustes preestablecidos, la compilación falla.
¿Tiene alguna idea sobre lo que podría conducir a este comportamiento al eliminar los tipos de flujo?
No es que las anotaciones de tipo no se eliminen. Es que { mytestprop: string } no es una anotación de tipo válida en el lado derecho de una asignación porque choca con la sintaxis para definir un objeto.
Específicamente, cuando el analizador de Flow ve la declaración { mytestprop: string } interpretará esto como un intento de crear un objeto con un campo llamado mytestprop con su valor establecido en el valor de la string variable, por lo que dejará la declaración tal como está. es, y obtendrá el error que ha visto en el navegador.
La forma correcta de escribir declaraciones de objetos es escribir el lado izquierdo de la declaración.
Por ejemplo,
let myProps: { myTestProp: string } = { myTestProp: "testProp" };si no está declarando sus accesorios por separado, puede declarar un tipo personalizado:
type myPropType = { myTestProp: string } // ... const myComponent = (props: myPropType) => //render your component Dado que la declaración de type es exclusiva de Flow y no es una declaración de JavaScript válida, se eliminará correctamente.