专栏首页终身学习者【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绑定(比如 ES5ES2015),那么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...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?

    我正在做一个项目,其中有一个倒序的列表。列表创建时间降序排序的,这里我想在语义和视觉上都能体现出来(让列表显示对应的编号,编号越大表示是最新的)。网上做了一些研...

    前端小智@大迁世界
  • 21个让React 开发更高效更有趣的工具

    有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。

    前端小智@大迁世界
  • 快速了解 React Hooks 原理

    我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能?

    前端小智@大迁世界
  • 去除inline-block元素间间距的解决方法

    上面的demo效果,明显的可以看出,在inline-block的元素之间存在“4px”的空白:

    飞奔去旅行
  • Odfjell Drilling投830万美元进军下一代机器人钻井系统

    Robotic Drilling Systems(机器人钻井系统)开发了一套完全机器人化的海上石油钻井平台系统。“钻井平台上将不会再有工人工作,机器人将负责完成...

    机器人网
  • Oracle SQL调优之表设计

    分区表使用与查询频繁而更新数据不频繁的情况,不过要记得加全局索引,而不加分区索引,分区类型:分区分为范围分区、列表分区、HASH分区、组合分区四种,用了分区表,...

    SmileNicky
  • Python3.6.5标准库文档(完整中文版)---内置函数目录

    Python解释器内置了许多功能和类型,它们始终可用。它们按字母顺序排列在这里。内置函数

    python鱼霸霸
  • Python ATM小程序 v1

    py3study
  • 8个优秀设计师的私藏配色小工具,速度收了

    配色在整个UI设计中占有举足轻重的地位,它可以直接影响用户对UI界面的体验感。作为UI设计师的你还停留在苦苦比对色卡,一个一个不停的尝试中?今天咱们来看看这8个...

    用户5009027
  • 字符串--最长回文子串(暴力讲解+Manacher)

    问题描述:给你一个字符串str,若子串s是回文串,则称s为str的回文子串,求s的最大长度

    用户2965768

扫码关注云+社区

领取腾讯云代金券