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

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

TypeScript 2.5 实现了可选的 catch 绑定建议，该建议更改了 ECMAScript 语法，以允许在 catch 子句中省略变量绑定。也就是说，咱们现在可以在try/catch语句中忽略错误变量及其周围的括号：

try {
  // ...
} catch {
  // ...
}

以前，即使不使用变量，也必须始终声明它：

try {
  // ...
} catch (error) {
  // ...
}

如果你的目标ECMAScript版本不支持可选的catch绑定(比如 ES5 或 ES2015)，那么TypeScript 编译器将为每个catch子句添加一个变量绑定，这样生成的代码在语法上就有效了。

生成前：

try {
  // ...
} catch {
  // ...
}

下面当咱们以ES5为目标时 TypeScript 编译器生成的 JS 代码:

try {
    // ...
}
catch (_a) {
    // ...
}

如果改为使用--target esnext来编译代码，则生成的不带变量绑定的catch子句将不变：

try {
    // ...
}
catch {
    // ...
}

通常，咱们不希望忽略应用程序中的错误。至少，希望将它们打印到控制台。然而，在一些罕见的情况下，可能根本不需要 catch 变量绑定。

假设咱们试图将一个错误记录到控制台，然后由于某种原因，日志代码本身会导致另一个错误。咱不希望日志代码抛出错误，所以在这种情况下，没有绑定的catch子句可能是有意义的

function log(error) {
  try {
    console.error(error);
  } catch {
    // There's not much more we can do
  }
}

TypeScript 2.6 添加了对JSX片段的支持。在.tsx文件中，现在可以使用新的 ... 语法来创建片段。

在React中，从一个组件返回多个元素是一种常见模式。例如，假设咱们希望在以下组件中渲染多个列表项：

class List extends React.Component {
  render() {
    return (
      

        
        
Item 3
      
    );
  }
}

然而，在咱们的ListItems组件中，咱们不能像这样简单地返回多个相邻的JSX元素

class ListItems extends React.Component {
  render() {
    return (
      
Item 1
      
Item 2
    );
  }
}

相邻的JSX元素必须包裹在一个封闭的元素中，因此咱们可以添加一个div元素

class ListItems extends React.Component {
  render() {
    return (
      

        
Item 1
        
Item 2
      
    );
  }
}

不幸的是，添加这样的包装器会破坏列表的结构。咱们的ListItems组件当前渲染以下DOM元素

  

    
Item 1
    
Item 2
  
  
Item 3

注意，

class ListItems extends React.Component {
  render() {
    return (
      
        
Item 1
        
Item 2
      
    );
  }
}

  
Item 1
  
Item 2
  
Item 3

class ListItems extends React.Component {
  render() {
    return (
      
        
Item 1
        
Item 2
      
    );
  }
}

class ListItems extends React.Component {
  render() {
    return (
      
        
Item 1
        
Item 2
      
    );
  }
}

class ListItems extends React.Component {
  render() {
    return (
      React.createElement(
        React.Fragment,
        null,
        React.createElement("li", null, "Item 1"),
        React.createElement("li", null, "Item 2")
      )
    );
  }
}

class ListItems extends React.Component {
  render() {
    return (
      
        
Item 1
        
Item 2
      
    );
  }
}