Búsqueda de sitios web

reactjs - Typescript/React comenzó a recibir muchos "variableName no está definido"

No estoy seguro de qué cambió, tal vez incluso esté relacionado con Babel, pero empecé a recibir errores como UserControler_1 no está definido cuando uso cosas así

ControladorDeUsuario.ts

export function signOut() { console.log("Sign Out") }

Page.tsx

import * as React from "react;
import { signOut } from "./UserControler";
import { TouchableWithoutFeedback, Text } from "react-native";

class Page extends React.Component {
  _signOut = () => signOut()

  render() {
    return (
      <TouchableWithoutFeedback onPress={this._signOut}>
         <Text>Sign Out</Text>
      </TouchableWithoutFeedback>
    )
  }
}

Los resultados anteriores generan un error como este

UserControler_1 no está definido

A veces da errores más específicamente, es decir.

No se puede encontrar la variable: signOut

Lo más raro es que si cambio el código a algo como esto, funciona bien

import * as React from "react;
import { signOut } from "./UserControler";

class Page extends React.Component {    
  render() {
    return (
     <TouchableWithoutFeedback onPress={() => signOut}>
       <Text>Sign Out</Text>
     </TouchableWithoutFeedback>
    )
  }
}

Muy confundido aquí

Mi tsconfig

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "es6",
    "target": "es6",
    "lib": ["es7"],
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-native",
    "removeComments": true,
    "outDir": "./dist",
    "typeRoots": ["node_modules/@types", "./typings"],
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "exclude": ["./node_modules", "./android", "./ios", "./__tests__", "./dist", "./__mocks__"],
  "include": ["./src"]
}

Esto se construye en la carpeta dist desde donde babel toma sus archivos y por lo tanto hace que la aplicación funcione, mi babelrc

{
  "presets": ["react-native"]
}

Respuesta #1

Parece ser un error de TypeScript introducido en 2.7.1 - era muy molesto, pero lo bueno es que actualizar a 2.7.2 lo soluciona. (Al menos solucionó el problema que experimenté).

Más información: https://github.com/Microsoft/TypeScript/issues/21478

Respuesta #2

<TouchableWithoutFeedback onPress={() => signOut}>

Funciona porque estás devolviendo la referencia a signOut, la función que importaste arriba. Lo importante a notar es que => lo que sea devuelve lo que sea.

 _signOut = () => signOut()

  render() {
    return (
      <TouchableWithoutFeedback onPress={this._signOut}>

No funciona porque en _signOut usas otra función flecha, pero esta vez devuelve signOut(), que se invoca en ese mismo momento. Lo extraño que estás viendo probablemente proviene del hecho de que en algunos momentos esa función puede no haber sido importada para cuando tu código la ejecuta e invoca la función.

así que la solución es algo así

 _signOut = () => signOut

  render() {
    return (
      <TouchableWithoutFeedback onPress={this._signOut}>

Al no invocar la función como lo hacías anteriormente, todo funciona como se espera.

Consulta esta excelente explicación de cómo usar funciones flecha dentro de React: https://stackoverflow.com/a/48700540/214347

Artículos relacionados