Question

我有一个我在Visual Studio React + Redux模板项目中使用以下“ render（）”方法制作的react组件：

public render() {
        return (
            <React.Fragment>
                <h1>Welcome to the Wayfaring Company {this.props.user?.activeCharacter}!</h1>
    
            </React.Fragment>
        );
    }

想法是，如果user属性（等）存在，则显示一条消息，如果不存在，则显示另一条消息。页面加载后，显示：“ Welcome to Wayfaring Company！”，然后更改为带有以下内容的打字稿错误屏幕：

Failed to compile

./src/components/Splashpage.tsx
Syntax error: Expression expected (34:77)

（与上面的渲染函数中带有.?的行相对应）

如果我删除了可选的链接操作（.?），则会收到编译错误，因为用户可能未定义。大。打字稿正在做我们想要的！

那么为什么可选链会导致代码在Visual Studio中编译并在浏览器中失败？我会以某种方式将代码编译为错误版本的打字稿吗？

编辑：更新到3.7版之前的Elvis运算符不会引起运行时错误，因此这似乎与Typescript版本控制问题有关。

 <h1>Welcome to the Wayfaring Company, {this.props.user!== null && this.props.user!== undefined ? this.props.user.activeCharacter : "Scout"}!</h1>

仍然试图深入了解IIS是否以某种方式运行了错误的Typescript版本？我对什么有很好的理解，但是为什么（以及如何修复）仍然让我难以理解。

是否可以通过Visual Studio运行此模板，而使用不支持??或.?运算符的Node.js版本？（我认为我正在使用节点12.X）

Answer 1

经过比我更愿意承认的时间，我将其归结为一个Node问题。

Null-coalescing and Optional Chaining仅添加在节点14.X 中。

最终确认我的本地工作站仅安装了 Node 12.X 后，所要做的就是升级，删除节点模块并重新启动IDE以便进入无编译错误的网页！哇！

差异在于，尽管它在3.7+版本中是有效的Typescript（因此VS可以很好地编译），但Node是完全独立的野兽，因此那里存在着看不见的不兼容性，直到运行时。

Answer 2

您将讨论未定义用户的情况，而不是未定义activeCharacter的情况。试试这个：

{this.props.user?.activeCharacter ?? ''}

这应该起作用，因为如果还未定义activeCharacter，它将返回一个空字符串（或您选择的字符串）。更好的是，尽管我根本不会渲染文本并提供一个框架ui，直到您完成数据的检索（我假设您正在等待数据提取）。

还要回答有关如何在打字稿中传递而不在浏览器/产品中传递的问题？好吧，您可能在某个位置为用户定义了一个接口，在该接口上声明activeCharacter是字符串或布尔值，这是必需的，这是公平的，但是例如，如果要从api或外部源/数据库中检索该用户对象，则可能是可能实际上没有定义activeCharacter（如果从那里获取数据的地方也严格地键入并用打字稿写成，尽管不允许activeCharacter永远是未定义的/空的，这将很有帮助。）

下面是完整的代码示例。

public render() {
            return (
                <React.Fragment>
                    <h1>Welcome to the Wayfaring Company {this.props.user?.activeCharacter ?? ''}!</h1>
        
                </React.Fragment>
            );
        }

为什么在运行时出现Typescript编译错误？

2 个答案: