TypeScript基礎入門之JSX(一)
介紹
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副檔名。
| Mode | Input | Output | Output File Extension |
|---|---|---|---|
| preserve | .jsx | ||
| react | React.createElement(“div”) | .js | |
| react-native | .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）或者您建立的自定義元件。 這有兩個重要原因：
- 對於React，內部元素以字串形式發出(React.createElement(“div”))，而您建立的元件則不是(React.createElement(MyComponent))。
- 應該以不同的方式查詢在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
有兩種方法可以定義基於值的元素：
- 無狀態功能元件（SFC）
- 類元件
因為這兩種型別的基於值的元素在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