TypeScript 2.8下的終極React組件模式

時間  2019-11-05
標籤 typescript 2.8 終極 react 組件 模式 欄目 React 简体版
原文   原文鏈接

譯者簡介 zqlu 螞蟻金服·數據體驗技術團隊javascript

翻譯自Ultimate React Component Patterns with Typescript 2.8，做者Martin Hocheljava

這篇博客受React Component Patterns啓發而寫react

在線Demogit

有狀態組件、無狀態組件、默認屬性、Render回調、組件注入、泛型組件、高階組件、受控組件

若是你瞭解我，你就已經知道我不編寫沒有類型定義的javascript代碼，因此我從0.9版本後，就很是喜歡TypeScript了。除了有類型的JS，我也很是喜歡React庫，因此當把React和Typescript 結合在一塊兒後，對我來講就像置身天堂同樣:)。整個應用程序和虛擬DOM中的完整的類型安全，是很是奇妙和開心的。github

因此這篇文章說是關於什麼的呢？在互聯網上有各類關於React組件模式的文章，但沒有介紹如何將這些模式應用到Typescript中。此外，即將發佈的TS 2.8版本帶來了另人興奮的新功能如、若有條件的類型(conditional types)、標準庫中新預約義的條件類型、同態映射類型修飾符等等，這些新功能是咱們可以以類型安全的方式輕鬆地建立常見的React組件模式。typescript

這篇文章篇幅會比較長，因此請你坐下放輕鬆，與此同時你將掌握Typescript下的 終極React組件模式。shell

全部的模式/例子均使用typescript 2.8版本和strict modenpm

準備開始

首先，咱們須要安裝typescript和tslibs幫助程序庫，以便咱們生出的代碼更小json

yarn add -D typescript@next
# tslib 將僅用與您的編譯目標不支持的功能
yarn add tslib
複製代碼

有了這個，咱們能夠初始化咱們的typescript配置：數組

# 這條命令將在咱們的工程中建立默認配置 tsconfig.json 
yarn tsc --init
複製代碼

如今咱們來安裝 react、react-dom 和它們的類型定義。

yarn add react react-dom
yarn add -D @types/{react,react-dom}
複製代碼

棒極啦！如今咱們能夠開始進入咱們的組件模式吧，不是嗎？

無狀態組件

你猜到了，這些是沒有state的組件(也被稱爲展現型組件)。在部分時候，它們也是純函數組件。讓咱們用TypeScript建立人造的無狀態Button組件。

同使用原生JS同樣，咱們須要引入React以便咱們可使用JSX

import React from 'react'

const Button = ({ onClick: handleClick, children }) => (
  <button onClick={handleClick}>{children}</button>
)
複製代碼

雖然 tsc 編譯器如今還會跑出錯誤！咱們須要顯式的告訴咱們的組件/函數咱們的props是什麼類型的。讓咱們定義咱們的 props：

import React, { MouseEvent, ReactNode } from 'react'
type Props = { 
 onClick(e: MouseEvent<HTMLElement>): void
 children?: ReactNode 
}

const Button = ({ onClick: handleClick, children }: Props) => (
  <button onClick={handleClick}>{children}</button>
)
複製代碼

如今咱們已經解決了全部的錯誤了！很是好！但咱們還能夠作的更好！

在@types/react中已經預約義一個類型type SFC<P>，它也是類型interface StatelessComponent<P>的一個別名，此外，它已經有預約義的children和其餘（defaultProps、displayName等等…），因此咱們不用每次都本身編寫！

因此最後的無狀態組件是這樣的：

import React, { MouseEvent, SFC } from 'react';

type Props = { onClick(e: MouseEvent<HTMLElement>): void };

const Button: SFC<Props> = ({ onClick: handleClick, children }) => (
  <button onClick={handleClick}>{children}</button>
);
複製代碼

有狀態組件

讓咱們使用咱們的Button組件來建立有狀態的計數器組件。

首先咱們須要定義initialState

const initialState = { clicksCount: 0 }
複製代碼

如今咱們將使用TypeScript來從咱們的實現中推斷出State的類型。

這樣咱們不須要分開維護咱們的類型定義和實現，咱們只有惟一的真相源，即咱們的實現，太好了！

type State = Readonly<typeof initialState>
複製代碼

另外請注意，該類型被明確映射爲使全部的屬性均爲只讀的。咱們須要再次使用State類型來顯式地在咱們的class上定義只讀的state屬性。

readonly state: State = initialState
複製代碼

這麼作的做用是什麼？

咱們知道咱們在React中不能像下面這樣直接更新state：

this.state.clicksCount = 2;
this.state = { clicksCount: 2 }
複製代碼

這將致使運行時錯誤，但在編譯時不會報錯。經過顯式地使用Readonly映射咱們的type State，和在咱們的類定義中設置只讀的state屬性，TS將會讓咱們馬上知道咱們作錯了。

例子：編譯時的State類型安全

22.gif | left | 827x289

整個容器組件/有狀態組件的實現：

咱們的容器組件尚未任何Props API，因此咱們須要將Compoent組件的第一個泛型參數定義爲Object（由於在React中props永遠是對象{}），並使用State類型做爲第二個泛型參數。

import React, { Component } from 'react';

import Button from './Button';

const initialState = { clicksCount: 0 };
type State = Readonly<typeof initialState>;

class ButtonCounter extends Component<object, State> {
  readonly state: State = initialState;

  render() {
    const { clicksCount } = this.state;
    return (
      <>
        <Button onClick={this.handleIncrement}>Increment</Button>
        <Button onClick={this.handleDecrement}>Decrement</Button>
        You've clicked me {clicksCount} times!
      </>
    );
  }

  private handleIncrement = () => this.setState(incrementClicksCount);
  private handleDecrement = () => this.setState(decrementClicksCount);
}

const incrementClicksCount = (prevState: State) => ({
  clicksCount: prevState.clicksCount + 1,
});
const decrementClicksCount = (prevState: State) => ({
  clicksCount: prevState.clicksCount - 1,
});
複製代碼

你可能已經注意到了咱們將狀態更新函數提取到類的外部做爲純函數。這是一種常見的模式，這樣咱們不須要了解渲染邏輯就能夠簡單的測試這些狀態更新函數。此外，由於咱們使用了TypeScript並將State顯式地映射爲只讀的，它將阻止咱們在這些函數中作一些更改狀態的操做：

const decrementClicksCount = (prevState: State) => ({
  clicksCount: prevState.clicksCount--,
});

// 這樣講拋出編譯錯誤：
//
// [ts] Cannot assign to 'clicksCount' because it is a constant or a read-only property.
複製代碼

很是酷是吧？：）

默認屬性

讓咱們擴展咱們的Button組件，新增一個string類型的顏色屬性。

type Props = {
  onClick(e: MouseEvent<HTMLElement>): void;
  color: string;
};
複製代碼

若是咱們想定義默認屬性，咱們能夠在咱們的組件中經過Button.defaultProps = {…}來定義。

經過這樣作，咱們須要改變咱們的屬性類型定義來標記屬性是可選有默認值的。

因此定義是這樣的（注意?操做符）

type Props = {
  onClick(e: MouseEvent<HTMLElement>): void;
  color?: string;
};
複製代碼

此時咱們的組件實現是這樣的：

const Button: SFC<Props> = ({ onClick: handleClick, color, children }) => (
  <button style={{ color }} onClick={handleClick}>
    {children}
  </button>
);
複製代碼

儘管這樣在咱們簡單的例子中可用的，這有一個問題。由於咱們在strict mode模式洗啊，可選的屬性color的類型是一個聯合類型undefined | string。

好比咱們想對color屬性作一些操做，TS將會拋出一個錯誤，由於它並不知道它在React建立中經過Component.defaultProps中已經定義了:

33.gif | left | 813x255

爲了知足TS編譯器，咱們可使用下面3種技術：

  • 使用__!操做符__在render函數顯式地告訴編譯器這個變量不會是undefined，儘管它是可選的，如：<button onClick={handleClick!}>{children}</button>
  • 使用__條件語句/三目運算符__來讓編譯器明白一些屬性是沒有被定義的：<button onClick={handleClick ? handleClick : undefined}>{children}</button>
  • 建立可服用的__withDefaultProps__高階函數，它將更新咱們的props類型定義和設置默認屬性。我認爲這是最簡潔乾淨的方案。

咱們能夠很簡單的實現咱們的高階函數（感謝TS 2.8種的條件類型映射）：

export const withDefaultProps = <
  P extends object,
  DP extends Partial<P> = Partial<P>
>(
  defaultProps: DP,
  Cmp: ComponentType<P>,
) => {
  // 提取出必須的屬性
  type RequiredProps = Omit<P, keyof DP>;
  // 從新建立咱們的屬性定義，經過一個相交類型，將全部的原始屬性標記成可選的，必選的屬性標記成可選的
  type Props = Partial<DP> & Required<RequiredProps>;

  Cmp.defaultProps = defaultProps;

  // 返回從新的定義的屬性類型組件，經過將原始組件的類型檢查關閉，而後再設置正確的屬性類型
  return (Cmp as ComponentType<any>) as ComponentType<Props>;
};
複製代碼

如今咱們可使用withDefaultProps高階函數來定義咱們的默認屬性，同時也解決了以前的問題：

const defaultProps = {
  color: 'red',
};

type DefaultProps = typeof defaultProps;
type Props = { onClick(e: MouseEvent<HTMLElement>): void } & DefaultProps;

const Button: SFC<Props> = ({ onClick: handleClick, color, children }) => (
  <button style={{ color }} onClick={handleClick}>
    {children}
  </button>
);

const ButtonWithDefaultProps = withDefaultProps(defaultProps, Button);
複製代碼

或者直接使用內聯（注意咱們須要顯式的提供原始Button組件的屬性定義，TS不能從函數中推斷出參數的類型）：

const ButtonWithDefaultProps = withDefaultProps<Props>(
  defaultProps,
  ({ onClick: handleClick, color, children }) => (
    <button style={{ color }} onClick={handleClick}>
      {children}
    </button>
  ),
);
複製代碼

如今Button組件的屬性已經被正確的定義被使用的，默認屬性被反應出來而且在類型定義中是可選的，但在實現中是必選的！

{
    onClick(e: MouseEvent<HTMLElement>): void
    color?: string
}
複製代碼

44.png | left | 827x83

組件使用方法仍然是同樣的：

render() {
    return (
        <ButtonWithDefaultProps
            onClick={this.handleIncrement}
        >
        	Increment
        </ButtonWithDefaultProps>
    )
}
複製代碼

固然這也使用與經過class定義的組件（得益於TS中的類結構起源，咱們不須要顯式指定咱們的Props泛型類型）。

它看起來像這樣：

const ButtonViaClass = withDefaultProps(
  defaultProps,
  class Button extends Component<Props> {
    render() {
      const { onClick: handleClick, color, children } = this.props;
      return (
        <button style={{ color }} onClick={handleClick}>
          {Children}
        </button>
      );
    }
  },
);
複製代碼

再次，它的使用方式仍然是同樣的：

render() {
  return (
    <ButtonViaClass onClick={this.handleIncrement}>Increment</ButtonViaClass>
  );
}
複製代碼

好比說你須要構建一個可展開的菜單組件，它須要在用戶點擊它時顯示子內容。咱們就可使用各類各樣的組件模式來實現它。

render回調/render屬性模式

實現組件的邏輯可複用的最好方式將組件的children放到函數中去，或者利用render屬性API——這也是爲何Render回調也被稱爲函數子組件。

讓咱們用render屬性方法實現一個Toggleable組件：

import React, { Component, MouseEvent } from 'react';
import { isFunction } from '../utils';

const initialState = {
  show: false,
};

type State = Readonly<typeof initialState>;
                      
type Props = Partial<{
  children: RenderCallback;
  render: RenderCallback;
}>;

type RenderCallback = (args: ToggleableComponentProps) => JSX.Element;
type ToggleableComponentProps = {
  show: State['show'];
  toggle: Toggleable['toggle'];
};

export class Toggleable extends Component<Props, State> {
  readonly state: State = initialState;

  render() {
    const { render, children } = this.props;
    const renderProps = {
      show: this.state.show,
      toggle: this.toggle,
    };

    if (render) {
      return render(renderProps);
    }

    return isFunction(children) ? children(renderProps) : null;
  }

  private toggle = (event: MouseEvent<HTMLElement>) =>
    this.setState(updateShowState);
}

const updateShowState = (prevState: State) => ({ show: !prevState.show });
複製代碼

這裏都發生了什麼，讓咱們來分別看看重要的部分：

const initialState = {
  show: false,
};
type State = Readonly<typeof initialState>;
複製代碼
  • 這裏咱們和前面的例子同樣聲明瞭咱們的state

如今咱們來定義組件的props（注意這裏咱們使用了Partitial映射類型，由於咱們全部的屬性都是可選的，不用分別對每一個屬性手動添加?標識符）：

type Props = Partial<{
  children: RenderCallback;
  render: RenderCallback;
}>;

type RenderCallback = (args: ToggleableComponentProps) => JSX.Element;
type ToggleableComponentProps = {
  show: State['show'];
  toggle: Toggleable['toggle'];
};
複製代碼

咱們須要同時支持child做爲函數，和render屬性做爲函數，它們二者都是可選的。爲了不重複代碼，咱們定義了RenderCallback做爲咱們的渲染函數定義：

type RenderCallback = (args: ToggleableComponentProps) => JSX.Element
複製代碼

在讀者眼中看起來比較奇怪的部分是咱們最後的別名類型：type ToggleableComponentProps！

type ToggleableComponentProps = {
  show: State['show'];
  toggle: Toggleable['toggle'];
};
複製代碼

這裏咱們使用了TypeScript的__查找類型（lookup types）__，因此咱們又不須要重複地去定義類型了：

  • show: State['show']咱們利用已有的state類型定義了show屬性
  • toggle: Toggleable['toggle']咱們利用了TS從類實現推斷類類型來定義toggle屬性。很好用並且很是強大。

剩下的實現部分很簡單，標準的render屬性/children做爲函數的模式：

export class Toggleable extends Component<Props, State> {
  // ...
  render() {
    const { render, children } = this.props;
    const renderProps = {
      show: this.state.show,
      toggle: this.toggle,
    };

    if (render) {
      return render(renderProps);
    }

    return isFunction(children) ? children(renderProps) : null;
  }
  // ...
}
複製代碼

如今咱們能夠把函數做爲children傳給Toggleable組件了：

<Toggleable>
  {({ show, toggle }) => (
    <>
      <div onClick={toggle}>
        <h1>some title</h1>
      </div>
      {show ? <p>some content</p> : null}
    </>
  )}
</Toggleable>
複製代碼

或者咱們能夠把函數做爲render屬性：

<Toggleable
  render={({ show, toggle }) => (
    <>
      <div onClick={toggle}>
        <h1>some title</h1>
      </div>
      {show ? <p>some content</p> : null}
    </>
  )}
/>
複製代碼

感謝TypeScript，咱們在render屬性的參數有了智能提示和正確的類型檢查：

55.gif | left | 674x370

若是咱們想複用它（好比用在多個菜單組件中），咱們只須要建立一個使用Toggleable邏輯的心組件：

type Props = { title: string }
const ToggleableMenu: SFC<Props> = ({ title, children }) => (
  <Toggleable
    render={({ show, toggle }) => (
      <>
        <div onClick={toggle}>
          <h1>title</h1>
        </div>
        {show ? children : null}
      </>
    )}
  />
)
複製代碼

如今咱們全新的__ToggleableMenu__組件已經能夠在Menu組件中使用了：

export class Menu extends Component {
  render() {
    return (
      <>
        <ToggleableMenu title="First Menu">Some content</ToggleableMenu>
        <ToggleableMenu title="Second Menu">Some content</ToggleableMenu>
        <ToggleableMenu title="Third Menu">Some content</ToggleableMenu>
      </>
    );
  }
}
複製代碼

而且它也像咱們指望的那樣工做了：

66.gif | left | 647x479

這中模式在咱們想更改渲染的內容，而不關心狀態改變的狀況下很是有用：能夠看到，咱們將渲染邏輯移到ToggleableMenu組件的額children函數中了，但把狀態管理邏輯保留在咱們的Toggleable組件中！

組件注入

爲了讓咱們的組件更靈活，咱們能夠引入組件注入模式。

什麼是組件注入模式呢？若是你對React-Router比較熟悉，那你已經在下面這樣路由定義的時候使用這種模式了：

<Route path="/foo" component={MyView} />
複製代碼

這樣咱們不是把函數傳遞給render/children屬性，而是經過component屬性「注入」組件。爲此，咱們能夠重構，把咱們的內置render屬性函數改爲一個可複用的無狀態組件：

type MenuItemProps = { title: string };
const MenuItem: SFC<MenuItemProps & ToggleableComponentProps> = ({
  title,
  toggle,
  show,
  children,
}) => (
  <>
    <div onClick={toggle}>
      <h1>{title}</h1>
    </div>
    {show ? children : null}
  </>
);
複製代碼

有了這個，咱們可使用render屬性重構ToggleableMenu：

type Props = { title: string };
const ToggleableMenu: SFC<Props> = ({ title, children }) => (
  <Toggleable
    render={({ show, toggle }) => (
      <MenuItem show={show} toggle={toggle} title={title}>
        {children}
      </MenuItem>
    )}
  />
);
複製代碼

這個完成以後，讓咱們來開始定義咱們新的API——compoent屬性。

咱們須要更新咱們的屬性API。

  • children如今能夠是函數或者ReactNode（當component屬性被使用時）
  • component是咱們新的API，它能夠接受實現了ToggleableComponentProps屬性的組件，而且它須要是設置爲any的泛型，這樣各類各樣的實現組件能夠添加其餘屬性到ToggleableComponentProps並經過TS的驗證
  • props咱們引入能夠傳入任意屬性的定義。它被定義成any類型的可索引類型，這裏咱們放鬆了嚴格的類型安全檢查...
// 咱們須要使用咱們任意的props類型來建立 defaultProps，默認是一個空對象
const defaultProps = { props: {} as { [name: string]: any } };
type Props = Partial<
  {
    children: RenderCallback | ReactNode;
    render: RenderCallback;
    component: ComponentType<ToggleableComponentProps<any>>;
  } & DefaultProps
>;
type DefaultProps = typeof defaultProps;
複製代碼

下一步，咱們須要添加新的屬性API到ToggleableComponentProps上，以便用戶能夠經過<Toggleable props={...} />來使用咱們的props屬性：

export type ToggleableComponentProps<P extends object = object> = {
  show: State['show'];
  toggle: Toggleable['toggle'];
} & P;
複製代碼

而後咱們須要更新咱們的render函數：

render() {
    const {
      component: InjectedComponent,
      props,
      render,
      children,
    } = this.props;
    const renderProps = {
      show: this.state.show,
      toggle: this.toggle,
    };

    // 當 component 屬性被使用時，children 是 ReactNode 而不是函數
    if (InjectedComponent) {
      return (
        <InjectedComponent {...props} {...renderProps}>
          {children}
        </InjectedComponent>
      );
    }

    if (render) {
      return render(renderProps);
    }

    return isFunction(children) ? children(renderProps) : null;
  }
複製代碼

完整的Toggleable組件實現以下，支持 render 屬性、children做爲函數、組件注入功能：

import React, { Component, ReactNode, ComponentType, MouseEvent } from 'react';

import { isFunction, getHocComponentName } from '../utils';

const initialState = { show: false };
const defaultProps = { props: {} as { [name: string]: any } };

type State = Readonly<typeof initialState>;
type Props = Partial<
  {
    children: RenderCallback | ReactNode;
    render: RenderCallback;
    component: ComponentType<ToggleableComponentProps<any>>;
  } & DefaultProps
>;

type DefaultProps = typeof defaultProps;
type RenderCallback = (args: ToggleableComponentProps) => JSX.Element;

export type ToggleableComponentProps<P extends object = object> = {
  show: State['show'];
  toggle: Toggleable['toggle'];
} & P;

export class Toggleable extends Component<Props, State> {
  static readonly defaultProps: Props = defaultProps;
  readonly state: State = initialState;

  render() {
    const {
      component: InjectedComponent,
      props,
      render,
      children,
    } = this.props;
    const renderProps = {
      show: this.state.show,
      toggle: this.toggle,
    };

    if (InjectedComponent) {
      return (
        <InjectedComponent {...props} {...renderProps}>
          {children}
        </InjectedComponent>
      );
    }

    if (render) {
      return render(renderProps);
    }

    return isFunction(children) ? children(renderProps) : null;
  }

  private toggle = (event: MouseEvent<HTMLElement>) =>
    this.setState(updateShowState);
}

const updateShowState = (prevState: State) => ({ show: !prevState.show });
複製代碼

咱們最終使用component屬性的ToggleableMenuViaComponentInjection組件是這樣的：

const ToggleableMenuViaComponentInjection: SFC<ToggleableMenuProps> = ({
  title,
  children,
}) => (
  <Toggleable component={MenuItem} props={{ title }}>
    {children}
  </Toggleable>
);
複製代碼

請注意，這裏咱們的props屬性沒有嚴格的類型安全檢查，由於它被定義成索引對象類型{ [name: string]: any }:

77.gif | left | 827x279

咱們能夠仍是像以前同樣使用ToggleableMenuViaComponentInjection組件來實現菜單渲染：

export class Menu extends Component {
  render() {
    return (
      <>
        <ToggleableMenuViaComponentInjection title="First Menu">
          Some content
        </ToggleableMenuViaComponentInjection>
        <ToggleableMenuViaComponentInjection title="Second Menu">
          Another content
        </ToggleableMenuViaComponentInjection>
        <ToggleableMenuViaComponentInjection title="Third Menu">
          More content
        </ToggleableMenuViaComponentInjection>
      </>
    );
  }
}
複製代碼

泛型組件

在咱們視線「組件注入模式」的時候，咱們失去了對props屬性嚴格的類型安全檢查。咱們怎樣修復這個問題呢？對，你猜到了！咱們能夠把咱們的Toggleable組件實現爲一個泛型組件！

首先咱們須要把咱們的屬性泛型化。咱們使用默認的泛型參數，因此咱們不須要在不必的時候顯式地提供類型（針對 render 屬性和 children 做爲函數）。

type Props<P extends object = object> = Partial<
  {
    children: RenderCallback | ReactNode;
    render: RenderCallback;
    component: ComponentType<ToggleableComponentProps<P>>;
  } & DefaultProps<P>
>;
複製代碼

咱們也須要把ToggleableComponnetProps更新成泛型的。不，等等，它已是泛型啦！因此還不須要作任何更改。

須要更新的是type DefaultProps，由於不支持從聲明實現推倒出泛型類型定義，因此須要把它重構成傳統的類型定義->實現：

type DefaultProps<P extends object = object> = { props: P };
const defaultProps: DefaultProps = { props: {} };
複製代碼

就快好啦！

如今讓咱們把組件類也泛型化。再次說明，咱們使用了默認的屬性，因此在沒有使用組件注入的時候不須要去指定泛型參數！

export class Toggleable<T = {}> extends Component<Props<T>, State> {}
複製代碼

這樣就完成了嗎？嗯…，咱們能夠在JSX中使用泛型類型嗎？

壞消息是，不能...

但咱們能夠在泛型組件上引入ofType的工場模式：

export class Toggleable<T = {}> extends Component<Props<T>, State> {
  static ofType<T extends object>() {
    return Toggleable as Constructor<Toggleable<T>>;
  }
}
複製代碼

完整的 Toggleable 組件實現，支持 Render 屬性、Children 做爲函數、帶泛型 props 屬性支持的組件注入：

import React, {
  Component,
  ReactNode,
  ComponentType,
  MouseEvent,
  SFC,
} from 'react';

import { isFunction, getHocComponentName } from '../utils';

const initialState = { show: false };
// const defaultProps = { props: {} as { [name: string]: any } };

type State = Readonly<typeof initialState>;
type Props<P extends object = object> = Partial<
  {
    children: RenderCallback | ReactNode;
    render: RenderCallback;
    component: ComponentType<ToggleableComponentProps<P>>;
  } & DefaultProps<P>
>;

type DefaultProps<P extends object = object> = { props: P };
const defaultProps: DefaultProps = { props: {} };
type RenderCallback = (args: ToggleableComponentProps) => JSX.Element;

export type ToggleableComponentProps<P extends object = object> = {
  show: State['show'];
  toggle: Toggleable['toggle'];
} & P;

export class Toggleable<T = {}> extends Component<Props<T>, State> {
  static ofType<T extends object>() {
    return Toggleable as Constructor<Toggleable<T>>;
  }
  static readonly defaultProps: Props = defaultProps;
  readonly state: State = initialState;

  render() {
    const {
      component: InjectedComponent,
      props,
      render,
      children,
    } = this.props;
    const renderProps = {
      show: this.state.show,
      toggle: this.toggle,
    };

    if (InjectedComponent) {
      return (
        <InjectedComponent {...props} {...renderProps}>
          {children}
        </InjectedComponent>
      );
    }

    if (render) {
      return render(renderProps);
    }

    return isFunction(children) ? children(renderProps) : null;
  }

  private toggle = (event: MouseEvent<HTMLElement>) =>
    this.setState(updateShowState);
}

const updateShowState = (prevState: State) => ({ show: !prevState.show });
複製代碼

有了static ofType工廠函數後，咱們能夠建立正確類型的泛型組件了。

type MenuItemProps = { title: string };
// ofType 是一種標識函數，返回的是相同實現的 Toggleable 組件，但帶有制定的 props 類型
const ToggleableWithTitle = Toggleable.ofType<MenuItemProps>();

type ToggleableMenuProps = MenuItemProps;
const ToggleableMenuViaComponentInjection: SFC<ToggleableMenuProps> = ({
  title,
  children,
}) => (
  <ToggleableWithTitle component={MenuItem} props={{ title }}>
    {children}
  </ToggleableWithTitle>
);
複製代碼

而且全部的東西都還像一塊兒同樣工做，但此次我有的 props={} 屬性有了正確的類型檢查。鼓掌吧！

Type Safe | left

高階組件

由於咱們已經建立了帶render回調功能的Toggleable組件，實現HOC也會很容易。（這也是 render 回調函數模式的一個大優點，由於咱們可使用HOC來實現）

讓咱們開始實現咱們的HOC組件吧：

咱們須要建立：

  • displayName (以便咱們在devtools能夠很好地調試)
  • WrappedComponent (以便咱們可以獲取原始的組件——對測試頗有用)
  • 使用hoist-non-react-staticsnpm包中的hoistNonReactStatics
import React, { ComponentType, Component } from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';

import { getHocComponentName } from '../utils';

import {
  Toggleable,
  Props as ToggleableProps,
  ToggleableComponentProps,
} from './RenderProps';

// OwnProps 是內部組件上任意公開的屬性
type OwnProps = object;
type InjectedProps = ToggleableComponentProps;

export const withToggleable = <OriginalProps extends object>(
  UnwrappedComponent: ComponentType<OriginalProps & InjectedProps>,
) => {
  // 咱們使用 TS 2.8 中的條件映射類型來獲得咱們最終的屬性類型
  type Props = Omit<OriginalProps, keyof InjectedProps> & OwnProps;

  class WithToggleable extends Component<Props> {
    static readonly displayName = getHocComponentName(
      WithToggleable.displayName,
      UnwrappedComponent,
    );
    static readonly UnwrappedComponent = UnwrappedComponent;

    render() {
      const { ...rest } = this.props;

      return (
        <Toggleable
          render={renderProps => (
            <UnwrappedComponent {...rest} {...renderProps} />
          )}
        />
      );
    }
  }

  return hoistNonReactStatics(WithToggleable, UnwrappedComponent);
};
複製代碼

如今咱們可使用HOC來建立咱們的Toggleable菜單組件了，並有正確的類型安全檢查！

const ToggleableMenuViaHOC = withToggleable(MenuItem)
複製代碼

一切正常，還有類型安全檢查！好極了！

99.gif | left | 812x293

受控組件

這是最後一個組件模式了！假設咱們想從父組件中控制咱們的Toggleable組件，咱們須要Toggleable組件配置化。這是一種很強大的模式。讓咱們來實現它吧。

當我說受控組件時，我指的是什麼？我想從Menu組件內控制因此的ToggleableManu組件的內容是否顯示。

100.gif | left | 656x512

咱們須要像這樣更新咱們的ToggleableMenu組件的實現：

// 更新咱們的屬性類型，以便咱們能夠經過 show 屬性來控制是否顯示
type Props = MenuItemProps & { show?: boolean };

// 注意：這裏咱們使用告終構來建立變量別，爲了避免和 render 回調函數的 show 參數衝突
// -> { show: showContent }

// Render 屬性
export const ToggleMenu: SFC<ToggleableComponentProps> = ({
  title,
  children,
  show: showContent,
}) => (
  <Toggleable show={showContent}>
    {({ show, toggle }) => (
      <MenuItem title={title} toggle={toggle} show={show}>
        {children}
      </MenuItem>
    )}
  </Toggleable>
);

// 組件注入
const ToggleableWithTitle = Toggleable.ofType<MenuItemProps>();

export const ToggleableMenuViaComponentInjection: SFC<Props> = ({
  title,
  children,
  show: showContent,
}) => (
  <ToggleableWithTitle
    component={MenuItem}
    props={{ title }}
    show={showContent}
  >
    {children}
  </ToggleableWithTitle>
);

// HOC不須要更改
export const ToggleMenuViaHOC = withToggleable(MenuItem);
複製代碼

有了這些更新後，咱們能夠在Menu中添加狀態，並傳遞給ToggleableMenu

const initialState = { showContents: false };
type State = Readonly<typeof initialState>;

export class Menu extends Component<object, State> {
  readonly state: State = initialState;
  render() {
    const { showContents } = this.state;
    return (
      <>
        <button onClick={this.toggleShowContents}>toggle showContent</button>
        <hr />
        <ToggleableMenu title="First Menu" show={showContents}>
          Some Content
        </ToggleableMenu>
        <ToggleableMenu title="Second Menu" show={showContents}>
          Another Content
        </ToggleableMenu>
        <ToggleableMenu title="Third Menu" show={showContents}>
          More Content
        </ToggleableMenu>
      </>
    );
  }
}
複製代碼

讓咱們爲了最終的功能和靈活性最後一次更新Toggleable組件。爲了讓 Toggleable 變成受控組件咱們須要：

  1. 添加show屬性到PropsAPI上
  2. 更新默認的屬性（由於show是可選的）
  3. 從Props.show更新組件的初始化state，由於如今咱們狀態中值可能取決於父組件傳來的屬性
  4. 在componentWillReceiveProps生命週期函數中從props更新state

1 & 2：

const initialState = { show: false }
const defaultProps: DefaultProps = { ...initialState, props: {} }
type State = Readonly<typeof initialState>
type DefaultProps<P extends object = object> = { props: P } & Pick<State, 'show'>
複製代碼

3 & 4：

export class Toggleable<T = {}> extends Component<Props<T>, State> {
  static readonly defaultProps: Props = defaultProps
  // Bang operator used, I know I know ...
  state: State = { show: this.props.show! }
  componentWillReceiveProps(nextProps: Props<T>) {
    const currentProps = this.props
    if (nextProps.show !== currentProps.show) {
      this.setState({ show: Boolean(nextProps.show) })
    }
  }
}
複製代碼

最終支持全部全部模式（Render屬性/Children做爲函數/組件注入/泛型組件/受控組件）的 Toggleable 組件：

import React, { Component, MouseEvent, ComponentType, ReactNode } from 'react'

import { isFunction, getHocComponentName } from '../utils'

const initialState = { show: false }
const defaultProps: DefaultProps = { ...initialState, props: {} }
type State = Readonly<typeof initialState>
export type Props<P extends object = object> = Partial<
  {
    children: RenderCallback | ReactNode
    render: RenderCallback
    component: ComponentType<ToggleableComponentProps<P>>
  } & DefaultProps<P>
>
type RenderCallback = (args: ToggleableComponentProps) => JSX.Element
export type ToggleableComponentProps<P extends object = object> = {
  show: State['show']
  toggle: Toggleable['toggle']
} & P
type DefaultProps<P extends object = object> = { props: P } & Pick<State, 'show'>

export class Toggleable<T extends object = object> extends Component<Props<T>, State> {
  static ofType<T extends object>() {
    return Toggleable as Constructor<Toggleable<T>>
  }
  static readonly defaultProps: Props = defaultProps
  readonly state: State = { show: this.props.show! }

  componentWillReceiveProps(nextProps: Props<T>, nextContext: any) {
    const currentProps = this.props

    if (nextProps.show !== currentProps.show) {
      this.setState({ show: Boolean(nextProps.show) })
    }
  }
  render() {
    const { component: InjectedComponent, children, render, props } = this.props
    const renderProps = { show: this.state.show, toggle: this.toggle }

    if (InjectedComponent) {
      return (
        <InjectedComponent {...props} {...renderProps}>
          {children}
        </InjectedComponent>
      )
    }

    if (render) {
      return render(renderProps)
    }

    return isFunction(children) ? children(renderProps) : new Error('asdsa()')
  }
  private toggle = (event: MouseEvent<HTMLElement>) => this.setState(updateShowState)
}

const updateShowState = (prevState: State) => ({ show: !prevState.show })
複製代碼

最終的Toggleable HOC 組件 withToggleable

只須要稍做修改 -> 咱們須要在HOC組件中傳遞 show 屬性，並更新咱們的OwnPropsAPI

import React, { ComponentType, Component } from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'

import { getHocComponentName } from '../utils'

import {
  Toggleable,
  Props as ToggleableProps,
  ToggleableComponentProps as InjectedProps,
} from './toggleable'

// OwnProps is for any public props that should be available on internal Component.props
// and for WrappedComponent
type OwnProps = Pick<ToggleableProps, 'show'>

export const withToogleable = <OriginalProps extends object>(
  UnwrappedComponent: ComponentType<OriginalProps & InjectedProps>
) => {
  // we are leveraging TS 2.8 conditional mapped types to get proper final prop types
  type Props = Omit<OriginalProps, keyof InjectedProps> & OwnProps
  class WithToggleable extends Component<Props> {
    static readonly displayName = getHocComponentName(
      WithToggleable.displayName,
      UnwrappedComponent
    )
    static readonly WrappedComponent = UnwrappedComponent
    render() {
      // Generics and spread issue
      // https://github.com/Microsoft/TypeScript/issues/10727
      const { show, ...rest } = this.props as Pick<Props, 'show'> // we need to explicitly pick props we wanna destructure, rest is gonna be type `{}`
      return (
        <Toggleable
          show={show}
          render={renderProps => <UnwrappedComponent {...rest} {...renderProps} />}
        />
      )
    }
  }

  return hoistNonReactStatics(WithToggleable, UnwrappedComponent as any) as ComponentType<Props>
}
複製代碼

總結

使用 TypeScript 和 React 時，實現恰當的類型安全組件可能會很棘手。但隨着 TypeScript 2.8中新加入的功能，咱們幾乎能夠在全部的 React 組件模式中編寫類型安全的組件。

在這遍很是長（對此十分抱歉）文章中，感謝TypeScript，咱們已經學會了在各類各樣的模式下怎麼編寫嚴格類型安全檢查的組件。

在這些模式中最強的應該是Render屬性模式，它讓咱們能夠在此基礎上不須要太多改動就能夠實現其餘常見的模式，如組件注入、高階組件等。

文中全部的demo均可以在個人 Github 倉庫中找到。

此外，須要明白的是，本文中演示的模版類型安全，只能在使用 VDOM/JSX 的庫中實現。

  • Angular 模版有 Language service 提供類型安全，但像 ngFor 等簡單的構造檢查好像都不行...
  • Vue 的模版不像 Angular，它們的模版和數據綁定只是神奇的字符串（但這有可能在將來會改變。儘管你能夠在模版中使用VDOM，但由於各類類型的屬性定義，它使用起來十分笨重（這怪 snabdom...））

和往常同樣，若是你有任何問題，能夠在這或者 twitter（@martin_hotell）聯繫我，另外，快樂的類型檢查夥伴們，乾杯！

對咱們團隊感興趣的能夠關注專欄，關注github或者發送簡歷至'tao.qit####alibaba-inc.com'.replace('####', '@')，歡迎有志之士加入~

原文地址：github.com/ProtoTeam/b…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程