Typescript / React开始出现许多“variableName未定义”的情况。

Question

我不确定发生了什么变化，可能与Babel有关，但是当我使用以下内容时，例如UserControler_1未定义，我开始出现错误。

UserControler.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>
    )
  }
}

上述代码会报错，报错信息如下：

UserControler_1未定义。

有时候错误信息更为具体，例如：找不到变量signOut。

最奇怪的是，如果我将代码更改为以下内容，它就可以正常运行。

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

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

我很困惑

我的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"]
}

这将构建到 dist 文件夹中，babel 从中提取其文件，从而使应用程序工作，我的 babelrc 文件。

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

- Ilja

---

第二段代码（按钮）能够正常工作的原因是你将 signOut [undefined] 赋值给了 onClick，这意味着它什么也不做。在第一个示例中，你正在执行 signOut()，这意味着它会出现错误，因为 signOut 不存在。这并不是解决问题的答案，只是说明了为什么一个有问题，而另一个没有问题 :-) - DoXicK

@DoXicK 更新了示例以保持一致，问题在于第二个版本也按预期执行了 signOut。 - Ilja

@DoXicK 确切的导入。 - Ilja

我在一个 TypeScript/React Native 项目中发现了类似的奇怪错误。它们很烦人，但重新启动 React Native 和 TypeScript 后就会消失。它们似乎是 ts 编译器和 rn 打包工具之间的某种缓存/竞争条件问题。可能我的理解有误，但似乎这些错误是在升级到 ts 2.7.x 后开始出现的。在你的情况下这些错误是否仍然存在——比如先编译再打包仍然会产生这些错误吗？ - artur grzesiak

@Ilja 没有 TypeScript 2.7 - Aluan Haddad

Answer 1

似乎是一个 TypeScript 的 bug，引入于 2.7.1 版本 - 这非常令人恼火，但好消息是升级到 2.7.2 版本可以解决它。（至少它解决了我遇到的问题）。

更多信息：https://github.com/Microsoft/TypeScript/issues/21478

- artur grzesiak

Answer 2

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

这个代码之所以能够运行，是因为你返回了上面导入的函数 signOut 的引用。需要注意的是 => 无论什么返回什么。

 _signOut = () => signOut()

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

这个代码不起作用是因为在 _signOut 函数中使用了另一个箭头函数，但这次它返回 signOut()，并立即被调用。你看到的奇怪行为可能是因为有些时候该函数可能还没有在代码中导入就已经被调用了。

所以解决方案类似于这样：

 _signOut = () => signOut

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

不要像以前那样调用函数，这样一切都按照预期工作。

查看此优秀的解释，了解如何在React中使用箭头函数：https://dev59.com/3VYM5IYBdhLWcg3wjAkR#48700540

- Mike Easley

---

如果没有需要传递的参数，仅仅执行<TouchableWithoutFeedback onPress={signOut}>而完全不带括号也很好。 - Han