【TS 演化史 -- 15】可选的 catch 语句变量 和 JSX 片断语法

做者：Marius Schulz
译者：前端小智
来源： https://mariusschulz.com/

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

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...

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。