JSX 运算符优先级 ?: and?答案

【问题标题】：JSX Operator precedence ?: and?JSX 运算符优先级 ?: and?
【发布时间】：2022-01-07 15:48:32
【问题描述】：

我正在使用 React-Router-v6，我想将一些道具作为位置传递给 useRoutes()。我有点困惑，因为我找到了一个例子 Modal 虽然这个例子没有使用 useRoutes() 我试图运行它但是一些操作员在我运行它时会抛出一些错误。
我发现?: 为conditional operator precedence 但我找不到它是如何工作的。它看起来像... ? ... : ...，但这对我不起作用。

我的整个问题是下面的命令是如何工作的，以及下面的运算符（as 和 ?:）做了什么。

let state = useLocation().state as { backgroundLocation?: Location };

PS：我认为整个命令类似于将Location 分配为state 的新属性，名称为backgroundLocation，但我仍然不理解整个功能。

【问题讨论】：

?: 不是您发布的内容中的运算符，而是 TypeScript。这些错误可能是因为您将其视为 JavaScript。
如果您注意到link ?: 指的是操作员。谢谢。
对，但那是针对 JavaScript 的，再说一次，你有 TypeScript。从as 开始的所有内容都不是 JavaScript，并且会在编译时被删除。请注意，您链接到的是 .tsx 文件。
可能的欺骗：stackoverflow.com/q/55781559/3001761
@jonrsharpe 你是对的。谢谢！

标签： javascript reactjs operator-precedence

【解决方案1】：

这是一个 TypeScript type assertion。它与条件运算符无关。

as 告诉 TypeScript“忽略你计算的类型，而是假设它是我告诉你的类型”。 { backgroundLocation?: Location } 表示具有可选属性 backgroundLocation 的对象。 backgroundLocation 的值是undefined（由于是可选的）或Location。

如果您的项目未设置为转译 typescript，那么您需要删除 typescript 并只使用纯 javascript。为此，只需删除 as { backgroundLocation?: Location }

【讨论】：

告诉 TypeScript “忽略你计算的类型，而是假设它是我告诉你的类型”-> 这并不完全正确。此行不起作用： const test = "hello" as boolean 因为两种类型都不会与另一种重叠。
@jperl 确实，打字稿会隐喻地问“你确定吗？”如果您做出了一个非常令人震惊的断言，您可以通过as unknown as boolean 回复“是的，我确定”。