typescript React Router v4 Alpha的TypeScript定义

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript React Router v4 Alpha的TypeScript定义相关的知识,希望对你有一定的参考价值。

/**
 * Custom typedef for React Router v4 (WIP).
 */

declare module 'react-router' {
  export type Action = 'PUSH' | 'REPLACE' | 'POP';

  export type Location = {
    pathname: string,
    search: string,
    hash: string,
    state?: any,
    key?: string,
  };


  export interface RouteProps {
    pattern: string;
    pathname: string;
    exactly: boolean;
    location: Location;
    params: Object;
  }

  export interface RouteRenderFn {
    (props: RouteProps): React.ReactNode | Promise<React.ReactNode>;
  }

  export interface RouteComponent extends React.ComponentClass<RouteProps> {
    props: RouteProps;
  }


  export type HistoryContext = {
    action: Action,
    location: Location,
    push: Function,
    replace: Function,
    go: Function,
    goBack: Function,
    goForward: Function,
    canGo?: Function,
    block: Function,
  }

  export type RouterContext = {
    createHref: () => {},
    transitionTo: () => {},
    replaceWtih: () => {},
    blockTransitions: () => {},
  };


  export interface LinkProps extends React.ClassAttributes<Link> {
    to: string | { pathname: string, query: string };
    replace?: boolean;
    activeStyle?: Object;
    activeClassName?: string;
    activeOnlyWhenExact?: boolean;
    isActive?: Function;
    children?: React.ReactChildren;
    style?: Object;
    className?: string;
    target?: string;
    onClick?: React.MouseEventHandler<any>;
  }

  export interface Link extends React.ComponentClass<LinkProps> {
    props: LinkProps;
  }

  export const Link: Link;


  export interface MatchProps extends React.ClassAttributes<Match> {
    pattern?: string;
    exactly?: boolean;
    location?: Object;
    children?: React.ReactChild;
    render?: RouteRenderFn;
    component?: React.ReactChild;
  }

  export interface Match extends React.ComponentClass<MatchProps> {
    props: MatchProps;
  }

  export const Match: Match;


  export interface MissProps extends React.ClassAttributes<Miss> {
    location?: Location;
    render?: RouteRenderFn;
    component?: React.ReactNode;
  }

  export interface Miss extends React.ComponentClass<MissProps> {
    props: MissProps;
  }

  export const Miss: Miss;


  export interface NavigationPromptProps extends React.ClassAttributes<NavigationPrompt> {
    when?: boolean;
    message: Function | string;
  }

  export interface NavigationPrompt extends React.ComponentClass<NavigationPromptProps> {
    props: NavigationPromptProps;
  }

  export const NavigationPrompt: NavigationPrompt;


  export interface RedirectProps extends React.ClassAttributes<Redirect> {
    to: string | Object;
    push?: boolean;
  }

  export interface Redirect extends React.ComponentClass<RedirectProps> {
    props: RedirectProps;
  }

  export const Redirect: Redirect;


  export interface BrowserRouterProps extends React.ClassAttributes<BrowserRouter> {
    basename?: string;
    forceRefresh?: boolean;
    getUserConfirmation?: Function;
    keyLength?: number;
    children?: React.ReactChildren;
  }

  export interface BrowserRouter extends React.ComponentClass<BrowserRouterProps> {
    props: BrowserRouterProps;
  }

  export const BrowserRouter: BrowserRouter;


  export interface HashRouterProps extends React.ClassAttributes<HashRouter> {
    basename?: string;
    getUserConfirmation?: Function;
    hashType?: string;
    children?: Function | React.ReactNode;
  }

  export interface HashRouter extends React.ComponentClass<HashRouterProps> {
    props: HashRouterProps;
  }

  export const HashRouter: HashRouter;


  export type ServerRouterContext = {
    getResult: Function,
  };

  export interface ServerRouterProps extends React.ClassAttributes<ServerRouter> {
    basename?: string;
    context: ServerRouterContext;
    location: string;
    children?: React.ReactNode;
  }

  export interface ServerRouter extends React.ComponentClass<ServerRouterProps> {
    props: ServerRouterProps;
  }

  export const ServerRouter: ServerRouter;


  export interface StaticRouterProps extends React.ClassAttributes<StaticRouter> {
    action: Object;
    blockTransitions?: Function;
    children?: React.ReactNode;
    createHref?: Function;
    location: Object | string;
    basename?: string;
    onPush: Function;
    onReplace: Function;
    stringifyQuery?: Function;
    parseQuery?: Function;
  }

  export interface StaticRouter extends React.ComponentClass<StaticRouterProps> {
    props: StaticRouterProps;
  }

  export const StaticRouter;

  export function createServerRenderContext(): ServerRouterContext;
}

以上是关于typescript React Router v4 Alpha的TypeScript定义的主要内容,如果未能解决你的问题,请参考以下文章

React Router TypeScript 错误与Router

typescript React Router v4 Alpha的TypeScript定义

React:react-router-dom Typescript 中不存在 useLocation Hook

什么在 TypeScript 中声明 react-router 参数

React Router - 更新版本后 withRouter 上的 Typescript 错误

React Router DOM 历史对象导致 Typescript 错误