【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元素必須包裹在一個封閉的元素中,因此咱們可以添加一個p元素

class ListItems extends React.Component {  render() {    return (      <p>        <li>Item 1</li>        <li>Item 2</li>      </p>    );  }}

不幸的是,添加這樣的包裝器會破壞列表的結構。咱們的ListItems組件當前渲染以下DOM元素

<ul>  <p>    <li>Item 1</li>    <li>Item 2</li>  </p>  <li>Item 3</li></ul>

注意,<p>不屬于這里,咱們可以通過使用JSX片段語法來消除它:

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

片段允許咱們對多個JSX元素進行分組,而不需要添加額外的節點?，F在,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...