TypeScript 中 react 元件的返回型別

Irakli Tchigladze 2022年5月18日
TypeScript 中 react 元件的返回型別

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

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

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

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

本文將討論可應用於元件的三種型別。它們是 JSX.ElementReactNodeReactElement

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

TypeScript 中 React 元件的返回型別

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

瞭解每種型別將幫助你編寫無錯誤且更準確的 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 輸入

該型別的 typeprops 設定為 any,因此定義比 ReactElement 更廣泛。

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

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

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

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

在 TypeScript 中 ReactNode 輸入

該型別由 React 類元件的 render() 函式返回。它可以是 ReactElementReactFragmentReactText、字串、布林值和 JavaScript 中的其他虛假值,例如 undefinednull

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

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn