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;
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