【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和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。