介紹

JSX是一種可嵌入的類似XML的語法。 它旨在轉換為有效的JavaScript，儘管該轉換的語義是特定於實現的。 JSX在React框架中越來越受歡迎，但此後也看到了其他實現。 TypeScript支援嵌入，型別檢查和直接編譯JSX到JavaScript。

基本用法

要使用JSX，您必須做兩件事。 1. 使用.tsx副檔名命名您的檔案 2. 啟用jsx選項

TypeScript附帶三種JSX模式：preserve, react 和 react-native。 這些模式僅影響編譯階段 - 型別檢查不受影響。 preserve模式將保持JSX作為輸出的一部分，以便由另一個變換步驟（例如Babel）進一步編譯。 此外，輸出將具有.jsx副檔名。 react模式將編譯React.createElement，在使用之前不需要經過JSX轉換，輸出將具有.js副檔名。 react-native模式相當於保留，因為它保留了所有JSX，但輸出將具有.js副檔名。

您可以使用–jsx命令列標誌或tsconfig.json檔案中的相應選項指定此模式。

注意：識別符號React是硬編碼的，因此必須使用大寫的R使React可用

as 操作符

回想一下如何寫一個型別斷言：

var foo = <foo>bar;

宣告變數bar的型別為foo。 由於TypeScript還對型別斷言使用尖括號，因此將其與JSX的語法結合會引入某些解析困難。 因此，TypeScript不允許.tsx檔案中的尖括號型別斷言。

由於上述語法不能在.tsx檔案中使用，因此應使用備用型別斷言運算子：as。 可以使用as運算子輕鬆重寫該示例。

var foo = bar as foo;

as運算子在.ts和.tsx檔案中均可用，並且行為與尖括號型別斷言樣式相同。

型別檢查

為了理解使用JSX進行型別檢查，您必須首先了解內部元素和基於值的元素之間的區別。 給定JSX表示式，expr可以引用環境固有的東西（例如DOM環境中的div或span）或者您建立的自定義元件。 這有兩個重要原因：

1. 對於React，內部元素以字串形式發出(React.createElement(“div”))，而您建立的元件則不是(React.createElement(MyComponent))。
2. 應該以不同的方式查詢在JSX元素中傳遞的屬性的型別。內在元素屬性本質上應該是已知的，而元件可能想要指定它們自己的屬性集。

TypeScript使用與React相同的約定來區分它們。內部元素始終以小寫字母開頭，而基於值的元素始終以大寫字母開頭。

內在元素 在特殊介面JSX.IntrinsicElements上查詢內部元素。 預設情況下，如果未指定此介面，則會執行任何操作，並且不會對內部元素進行型別檢查。 但是，如果存在此介面，則將內部元素的名稱作為JSX.IntrinsicElements介面上的屬性進行查詢。 例如：

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

<foo />; // ok
<bar />; // error

在上面的示例中，將正常工作，但將導致錯誤，因為它尚未在JSX.IntrinsicElements上指定。

注意：您還可以在JSX.IntrinsicElements上指定catch-all字串索引器，如下所示：

declare namespace JSX {
   interface IntrinsicElements {
       [elemName: string]: any;
   }
}

基於值的要素

基於值的元素只需通過範圍內的識別符號進行查詢。

import MyComponent from "./myComponent";

<MyComponent />; // ok
<SomeOtherComponent />; // error

有兩種方法可以定義基於值的元素：

1. 無狀態功能元件（SFC）
2. 類元件

因為這兩種型別的基於值的元素在JSX表示式中無法區分，所以首先TS嘗試使用過載解析將表示式解析為無狀態功能元件。 如果該過程成功，則TS完成將表示式解析為其宣告。 如果該值無法解析為SFC，則TS將嘗試將其解析為類元件。 如果失敗，TS將報告錯誤。

無狀態功能元件

顧名思義，該元件被定義為JavaScript函式，其第一個引數是props物件。 TS強制其返回型別必須可分配給JSX.Element。

interface FooProp {
  name: string;
  X: number;
  Y: number;
}

declare function AnotherComponent(prop: {name: string});
function ComponentFoo(prop: FooProp) {
  return <AnotherComponent name={prop.name} />;
}

const Button = (prop: {value: string}, context: { color: string }) => <button>

因為SFC只是一個JavaScript函式，所以這裡也可以使用函式過載：

interface ClickableProps {
  children: JSX.Element[] | JSX.Element
}

interface HomeProps extends ClickableProps {
  home: JSX.Element;
}

interface SideProps extends ClickableProps {
  side: JSX.Element | string;
}

function MainButton(prop: HomeProps): JSX.Element;
function MainButton(prop: SideProps): JSX.Element {
  ...
}

類元件

可以定義類元件的型別。 但是，要這樣做，最好理解兩個新術語：元素類型別和元素例項型別。

給定，元素類型別是Expr的型別。 因此，在上面的示例中，如果MyComponent是ES6類，則類型別將是該類的建構函式和靜態。 如果MyComponent是工廠函式，則類型別將是該函式。

一旦建立了類型別，例項型別就由類型別構造的返回型別或呼叫簽名（無論哪個存在）的並集決定。 同樣，在ES6類的情況下，例項型別將是該類的例項的型別，並且在工廠函式的情況下，它將是從函式返回的值的型別。

class MyComponent {
  render() {}
}

// use a construct signature
var myComponent = new MyComponent();

// element class type => MyComponent
// element instance type => { render: () => void }

function MyFactoryFunction() {
  return {
    render: () => {
    }
  }
}

// use a call signature
var myComponent = MyFactoryFunction();

// element class type => FactoryFunction
// element instance type => { render: () => void }

元素例項型別很有趣，因為它必須可以賦值給JSX.ElementClass，否則會導致錯誤。 預設情況下，JSX.ElementClass是{}，但可以對其進行擴充，以將JSX的使用僅限於那些符合正確介面的型別。

declare namespace JSX {
  interface ElementClass {
    render: any;
  }
}

class MyComponent {
  render() {}
}
function MyFactoryFunction() {
  return { render: () => {} }
}

<MyComponent />; // ok
<MyFactoryFunction />; // ok

class NotAValidComponent {}
function NotAValidFactoryFunction() {
  return {};
}

<NotAValidComponent />; // error
<NotAValidFactoryFunction />; // error