轉(zhuǎn)發(fā) TypeScript基礎(chǔ)入門(mén)之JSX(一)

介紹

JSX是一種可嵌入的類(lèi)似XML的語(yǔ)法奢入。 它旨在轉(zhuǎn)換為有效的JavaScript，盡管該轉(zhuǎn)換的語(yǔ)義是特定于實(shí)現(xiàn)的烘苹。 JSX在React框架中越來(lái)越受歡迎筋量，但此后也看到了其他實(shí)現(xiàn)。 TypeScript支持嵌入惧眠，類(lèi)型檢查和直接編譯JSX到JavaScript。

基本用法

要使用JSX于个，您必須做兩件事氛魁。 1. 使用.tsx擴(kuò)展名命名您的文件 2. 啟用jsx選項(xiàng)

TypeScript附帶三種JSX模式：preserve, react 和 react-native。 這些模式僅影響編譯階段 - 類(lèi)型檢查不受影響厅篓。 preserve模式將保持JSX作為輸出的一部分秀存，以便由另一個(gè)變換步驟（例如Babel）進(jìn)一步編譯。 此外羽氮，輸出將具有.jsx文件擴(kuò)展名或链。 react模式將編譯React.createElement，在使用之前不需要經(jīng)過(guò)JSX轉(zhuǎn)換档押，輸出將具有.js文件擴(kuò)展名澳盐。 react-native模式相當(dāng)于保留，因?yàn)樗Ａ袅怂蠮SX令宿，但輸出將具有.js文件擴(kuò)展名洞就。

您可以使用–jsx命令行標(biāo)志或tsconfig.json文件中的相應(yīng)選項(xiàng)指定此模式。

注意：標(biāo)識(shí)符React是硬編碼的掀淘，因此必須使用大寫(xiě)的R使React可用

as 操作符

回想一下如何寫(xiě)一個(gè)類(lèi)型斷言：

var foo = <foo>bar;

聲明變量bar的類(lèi)型為foo旬蟋。 由于TypeScript還對(duì)類(lèi)型斷言使用尖括號(hào)，因此將其與JSX的語(yǔ)法結(jié)合會(huì)引入某些解析困難革娄。 因此倾贰，TypeScript不允許.tsx文件中的尖括號(hào)類(lèi)型斷言。

由于上述語(yǔ)法不能在.tsx文件中使用拦惋，因此應(yīng)使用備用類(lèi)型斷言運(yùn)算符：as匆浙。 可以使用as運(yùn)算符輕松重寫(xiě)該示例。

var foo = bar as foo;

as運(yùn)算符在.ts和.tsx文件中均可用厕妖，并且行為與尖括號(hào)類(lèi)型斷言樣式相同首尼。

類(lèi)型檢查

為了理解使用JSX進(jìn)行類(lèi)型檢查，您必須首先了解內(nèi)部元素和基于值的元素之間的區(qū)別言秸。 給定JSX表達(dá)式软能，expr可以引用環(huán)境固有的東西（例如DOM環(huán)境中的div或span）或者您創(chuàng)建的自定義組件。 這有兩個(gè)重要原因：

對(duì)于React举畸，內(nèi)部元素以字符串形式發(fā)出(React.createElement(“div”))查排，而您創(chuàng)建的組件則不是(React.createElement(MyComponent))。
應(yīng)該以不同的方式查找在JSX元素中傳遞的屬性的類(lèi)型抄沮。內(nèi)在元素屬性本質(zhì)上應(yīng)該是已知的跋核，而組件可能想要指定它們自己的屬性集岖瑰。
TypeScript使用與React相同的約定來(lái)區(qū)分它們。內(nèi)部元素始終以小寫(xiě)字母開(kāi)頭砂代，而基于值的元素始終以大寫(xiě)字母開(kāi)頭蹋订。

內(nèi)在元素 在特殊接口JSX.IntrinsicElements上查找內(nèi)部元素。 默認(rèn)情況下刻伊，如果未指定此接口露戒，則會(huì)執(zhí)行任何操作，并且不會(huì)對(duì)內(nèi)部元素進(jìn)行類(lèi)型檢查娃圆。 但是玫锋，如果存在此接口，則將內(nèi)部元素的名稱(chēng)作為JSX.IntrinsicElements接口上的屬性進(jìn)行查找讼呢。 例如：

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

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

在上面的示例中撩鹿，將正常工作，但將導(dǎo)致錯(cuò)誤悦屏，因?yàn)樗形丛贘SX.IntrinsicElements上指定节沦。

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

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

基于值的要素

基于值的元素只需通過(guò)范圍內(nèi)的標(biāo)識(shí)符進(jìn)行查找础爬。

import MyComponent from "./myComponent";

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

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

• 無(wú)狀態(tài)功能組件（SFC）
• 類(lèi)組件
  因?yàn)檫@兩種類(lèi)型的基于值的元素在JSX表達(dá)式中無(wú)法區(qū)分甫贯，所以首先TS嘗試使用重載解析將表達(dá)式解析為無(wú)狀態(tài)功能組件。 如果該過(guò)程成功看蚜，則TS完成將表達(dá)式解析為其聲明叫搁。 如果該值無(wú)法解析為SFC，則TS將嘗試將其解析為類(lèi)組件供炎。 如果失敗渴逻，TS將報(bào)告錯(cuò)誤。

無(wú)狀態(tài)功能組件

顧名思義音诫，該組件被定義為JavaScript函數(shù)惨奕，其第一個(gè)參數(shù)是props對(duì)象。 TS強(qiáng)制其返回類(lèi)型必須可分配給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>

因?yàn)镾FC只是一個(gè)JavaScript函數(shù)梨撞，所以這里也可以使用函數(shù)重載：

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 {
  ...
}

類(lèi)組件

可以定義類(lèi)組件的類(lèi)型。 但是香罐，要這樣做卧波，最好理解兩個(gè)新術(shù)語(yǔ)：元素類(lèi)類(lèi)型和元素實(shí)例類(lèi)型。

給定穴吹，元素類(lèi)類(lèi)型是Expr的類(lèi)型幽勒。 因此，在上面的示例中港令，如果MyComponent是ES6類(lèi)啥容，則類(lèi)類(lèi)型將是該類(lèi)的構(gòu)造函數(shù)和靜態(tài)。 如果MyComponent是工廠(chǎng)函數(shù)顷霹，則類(lèi)類(lèi)型將是該函數(shù)咪惠。

一旦建立了類(lèi)類(lèi)型，實(shí)例類(lèi)型就由類(lèi)類(lèi)型構(gòu)造的返回類(lèi)型或調(diào)用簽名（無(wú)論哪個(gè)存在）的并集決定淋淀。 同樣遥昧，在ES6類(lèi)的情況下，實(shí)例類(lèi)型將是該類(lèi)的實(shí)例的類(lèi)型朵纷，并且在工廠(chǎng)函數(shù)的情況下炭臭，它將是從函數(shù)返回的值的類(lèi)型。

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 }

元素實(shí)例類(lèi)型很有趣袍辞，因?yàn)樗仨毧梢再x值給JSX.ElementClass鞋仍，否則會(huì)導(dǎo)致錯(cuò)誤。 默認(rèn)情況下搅吁，JSX.ElementClass是{}威创，但可以對(duì)其進(jìn)行擴(kuò)充，以將JSX的使用僅限于那些符合正確接口的類(lèi)型谎懦。

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