TypeScript 中 react 元件的返回型別

React 是一個現代 JavaScript 庫，可讓你為 Web 應用程式建立漂亮的 UI。越來越多的開發人員正在採用稱為 TypeScript 的 JavaScript 子集。

靜態型別檢查可以為你的程式碼帶來結構和秩序，並幫助你更快地檢測錯誤。

通常，在 TypeScript 中編寫 React 應用程式時，不需要為元件分配返回型別。但是，有時有必要這樣做。

例如，公司範圍的 linting 規則可能要求開發人員指定元件的返回型別。

本文將討論可應用於元件的三種型別。它們是 JSX.Element、ReactNode 和 ReactElement。

我們將討論它們之間的相似之處和不同之處。

TypeScript 中 React 元件的返回型別

如果需要為元件分配型別，可以從上面列出的三種型別中選擇一種。JSX.Element、ReactNode 和 ReactElement 之間的區別很微妙但很重要。

瞭解每種型別將幫助你編寫無錯誤且更準確的 TypeScript 程式碼。

在 TypeScript 中 ReactElement 輸入

它是來自@types/react 包的介面。功能元件的 render() 函式返回 ReactElement 型別。

如果你必須為 React 中的功能元件分配一個型別，則應該是這個。

如果元件有可能返回 null，你應該使用 or ||運算子為其分配型別 ReactElement ||空值。

@types/react 包中的實際介面定義如下所示。

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

你可以將 ReactElement 視為元件的原始型別。下面列出的其他型別是建立在這個基本介面之上的。

在 TypeScript 中 JSX.Element 輸入

該型別的 type 和 props 設定為 any，因此定義比 ReactElement 更廣泛。

它的存在是因為 React 不是唯一依賴 JSX 的庫。

JSX.Element 允許其他框架在此之上定義自己的、更具體的型別。在 React 的情況下，ReactElement 是基於 JSX.Element 的更具體的型別。

如果要指定功能元件的返回型別，可以使用 ReactElement 或 JSX.Element。讓我們看一下使用後者的示例。

type sampleProps = {
  someText: string;
};
const App = ({ someText }: sampleProps): JSX.Element => <p>{someText}</p>;

在 TypeScript 中 ReactNode 輸入

該型別由 React 類元件的 render() 函式返回。它可以是 ReactElement、ReactFragment、ReactText、字串、布林值和 JavaScript 中的其他虛假值，例如 undefined 或 null。

下面是來自 @types/react 包的 ReactNode 型別的官方定義。

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;