为什么我在运行时遇到Typescript编译错误

Question

我在Visual Studio react+Redux模板项目中制作了一个react组件，其中包含以下"；render(("方法：

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

</React.Fragment>
);
}

其想法是，如果存在user属性(等等(，则显示一条消息，如果不存在，则显示另一条消息。当页面加载时，它显示："；欢迎光临Wayfaring公司&"；，然后切换到带有以下内容的打字脚本错误屏幕：

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？我对什么有很好的理解，但我仍然无法理解为什么(以及如何修复(。

通过visualstudio运行此模板是否可能使用了不支持??或.?运算符的Node.js版本？(我认为我正在使用Node 12.X(

Answer 1

经过比我愿意承认的更多的时间，我发现了一个Node问题。

空合并和可选链接仅在节点14.X.中添加

在最终确认我的本地工作站只安装了Node12.X后，只需升级、删除节点模块并重新启动IDE即可获得无编译错误的网页！好极了

不同之处在于，虽然它是3.7+的有效Typescript(因此VS编译得很好(，但Node是一个完全独立的野兽，因此存在一种无形的不兼容性，直到运行时才会发现。

Answer 2

您涵盖的是未定义用户的情况，而不是未定义activeCharacter的情况。试试这个：

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

这应该有效，因为如果activeCharacter也未定义，它将返回一个空字符串(或您选择的字符串(。更好的是，在您检索完数据之前，我根本不会渲染文本并提供一个骨架ui(我假设您正在等待数据提取(。

还要回答你的问题，即它如何能在打字稿中传递，但不能在你的浏览器/产品中传递？你可能在某个地方为你的用户定义了一个界面，你声明activeCharacter是一个字符串或布尔值，这是必需的，这是公平的，但是，例如，如果你从api或外部源/db检索该用户对象，那么可能实际上没有定义activeCharacter(如果你从中获取数据的地方也是严格键入的，并且是用typescript编写的，尽管不允许activeCharacter为undefined/null，这会有所帮助(。

完整的代码示例如下。

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

</React.Fragment>
);
}