【TS 演化史 -- 15】可选的 catch 语句变量 和 JSX 片段语法
【TS 演化史 -- 15】可选的 catch 语句变量 和 JSX 片段语法
作者：Marius Schulz 译者：前端小智 来源：https://mariusschulz.com/
TypeScript 2.4 为标识符实现了拼写纠正机制。即使咱们稍微拼错了一个变量、属性或函数名，TypeScript 在很多情况下都可以提示正确的拼写。
TypeScript 2.5 实现了可选的 catch 绑定建议，该建议更改了 ECMAScript 语法，以允许在 catch 子句中省略变量绑定。 也就是说，咱们现在可以在try/catch语句中忽略错误变量及其周围的括号：
try {
// ...
} catch {
// ...
}以前，即使不使用变量，也必须始终声明它：
try {
// ...
} catch (error) {
// ...
}成的 JS 代码
如果你的目标ECMAScript版本不支持可选的catch绑定(比如 ES5 或 ES2015)，那么TypeScript 编译器将为每个catch子句添加一个变量绑定，这样生成的代码在语法上就有效了。
生成前：
try {
// ...
} catch {
// ...
}下面当咱们以ES5为目标时 TypeScript 编译器生成的 JS 代码:
try {
// ...
}
catch (_a) {
// ...
}如果改为使用--target esnext来编译代码，则生成的不带变量绑定的catch子句将不变：
try {
// ...
}
catch {
// ...
}可选catch绑定的用例
通常，咱们不希望忽略应用程序中的错误。至少，希望将它们打印到控制台。然而，在一些罕见的情况下，可能根本不需要 catch 变量绑定。
假设咱们试图将一个错误记录到控制台，然后由于某种原因，日志代码本身会导致另一个错误。咱不希望日志代码抛出错误，所以在这种情况下，没有绑定的catch子句可能是有意义的
function log(error) {
try {
console.error(error);
} catch {
// There's not much more we can do
}
}JSX 片段语法
TypeScript 2.6 添加了对JSX片段的支持。 在.tsx文件中，现在可以使用新的<> ... </>语法来创建片段。
JSX 片段背后的动机
在React中，从一个组件返回多个元素是一种常见模式。例如，假设咱们希望在以下组件中渲染多个列表项：
class List extends React.Component {
render() {
return (
<ul>
<ListItems />
<li>Item 3</li>
</ul>
);
}
}然而，在咱们的ListItems组件中，咱们不能像这样简单地返回多个相邻的JSX元素
class ListItems extends React.Component {
render() {
return (
<li>Item 1</li>
<li>Item 2</li>
);
}
}相邻的JSX元素必须包裹在一个封闭的元素中，因此咱们可以添加一个div元素
class ListItems extends React.Component {
render() {
return (
<div>
<li>Item 1</li>
<li>Item 2</li>
</div>
);
}
}不幸的是，添加这样的包装器会破坏列表的结构。咱们的ListItems组件当前渲染以下DOM元素
<ul>
<div>
<li>Item 1</li>
<li>Item 2</li>
</div>
<li>Item 3</li>
</ul>注意，<div>不属于这里，咱们可以通过使用JSX片段语法来消除它：
class ListItems extends React.Component {
render() {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
</>
);
}
}片段允许咱们对多个JSX元素进行分组，而不需要添加额外的节点。现在，List 组件渲染结构就正常了：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>另外，也可以写React.Fragment来代替新的JSX语法：
class ListItems extends React.Component {
render() {
return (
<React.Fragment>
<li>Item 1</li>
<li>Item 2</li>
</React.Fragment>
);
}
}使用 TypeScript 编译 JSX 片段
下面带有新的JSX语法的ListItems组件
class ListItems extends React.Component {
render() {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
</>
);
}
}如果咱们使用--jsx react(和--target es2015)编译.tsx文件，会生成下面的 JS 代码：
class ListItems extends React.Component {
render() {
return (
React.createElement(
React.Fragment,
null,
React.createElement("li", null, "Item 1"),
React.createElement("li", null, "Item 2")
)
);
}
}编译器通过调用 React.createElement() 方法来替换片段语法，并将其React.Fragment作为第一个参数传递。
如果使用--jsx preserve(和--target es2015)来编译ListItems组件，那么生成的代码就不会有变化：
class ListItems extends React.Component {
render() {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
</>
);
}
}代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文： https://mariusschulz.com/blog... https://mariusschulz.com/blog...
腾讯云开发者
