React Hooks-useTypescript!

import * as React from 'react'interface IProps {
  // ... props接口}// 现在我们得这么写const MyNewComponent: React.FC<IProps> = (props) => {...};// 过去的写法const MyOldComponent: React.SFC<IProps> = (props) => {...};

interface FunctionComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;}

import * as React from 'react'

const FunctionComponent: React.FC = () => {
  const [count, setCount] = React.useState(0) //useState hook
}

import * as React from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div onClick={() => setCount(count + 1)}>
      {count}
    </div>
  );
};

import * as React from 'react';

interface IUser {
  username: string;
  email:  string;
  password: string;
}

const ComplexState = ({ initialUserData }) => {
  const [user, setUser] = React.useState<IUser | null>(initialUserData);

  if (!user) {
    // do something else when our user is null
  }

  return (
    <form>
      <input value={user.username} onChange={e => setUser({...user, username: e.target.value})} />
      <input value={user.email} onChange={e => setUser({...user, email: e.target.value})} />
      <input value={user.password} onChange={e => setUser({...user, password: e.target.value})} />
    </form>
  );
}

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
type Dispatch<A> = (value: A) => void;
type SetStateAction<S> = S | ((prevState: S) => S);

useEffect(() => {
  const subscription = props.source.beginAPIPoll();
  return () => {
    // Clean up the subscription
    subscription.cancelAPIPoll();
  };
});

function DelayedEffect(props: { timerMs: number }) {
  const { timerMs } = props;
  //setTimeout隐式地返回了一个数字
  useEffect(() => setTimeout(() => {/* do stuff */}, timerMs), [timerMs])
  // **
  return null
}

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
// The first argument, `effect`
type EffectCallback = () => (void | (() => void | undefined));
// The second argument, `deps?`
type DependencyList = ReadonlyArray<any>;

import { createContext, useContext } from 'react';
props ITheme {
  backgroundColor: string;
  color: string;
}
// The standard way to create context. It takes an initial value object
const ThemeContext = createContext<ITheme>({
  backgroundColor: 'black',
  color: 'white',
})
// Accessing context in a child component
const themeContext = useContext<ITheme>(ThemeContext);

function useContext<T>(context: Context<T>): T;

interface Context<T> {
  Provider: Provider<T>;
  Consumer: Consumer<T>;
  displayName?: string;
}

const [state, dispatch] = useReducer(reducer, initialState, init); |

import * as React from 'react';

enum ActionType {
  Increment = 'increment',
  Decrement = 'decrement',
}

interface IState {
  count: number;
}

interface IAction {
  type: ActionType;
  payload: {
    count: number;
  };
}

const initialState: IState = {count: 0};

const reducer: React.Reducer<IState, IAction> = (state, action) => {
  switch (action.type) {
    case ActionType.Increment:
      return {count: state.count + action.payload.count};
    case ActionType.Decrement:
      return {count: state.count - action.payload.count};
    default:
      throw new Error();
  }
}

const ComplexState = () => {
  const [state, dispatch] = React.useReducer<React.Reducer<IState, IAction>>(reducer, initialState);

  return (
    <div>
      <div>Count: {state.count}</div>
      <button onClick={
        () => dispatch({type: ActionType.Increment, payload: { count: 1 } })
      }>+</button>
      <button onClick={
        () => dispatch({type: ActionType.Decrement, payload: { count: 1 }})
      }>-</button>
    </div>
  );

type Dispatch<A> = (value: A) => void;
type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;

function useReducer<R extends Reducer<any, any>, I>(
  reducer: R,
  initializerArg: I & ReducerState<R>,
  initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

function useReducer<R extends Reducer<any, any>, I>(
  reducer: R,
  initializerArg: I,
  initializer: (arg: I) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
  initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); |

const computeExpensiveValue = (end: number) => {
  let result = 0;

  for (let i = 0; i < end * 1000000; i++) {
    for (let j = 0; i < end * 1000; j++) {
       result = result + i - j;
    }
  }

  return result;
};

const MyComponent = ({ end = 0 }) => {
  const memoizedNumber = React.useMemo<number>(computeExpensiveValue(end))

  return (
    <DisplayResult result={memoizedNumber} />
  );
}

function useMemo<T>(factory: () => T, deps: DependencyList): T;

const refContainer = useRef(initialValue);

function TextInputWithFocusButton() {
  // The type of our ref is an input element
  const inputEl = useRef<HTMLInputElement>(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

function useRef<T>(initialValue: T): MutableRefObject<T>;

interface MutableRefObject<T> {
  current: T;
}

| useImperativeHandle(ref, createHandle, [inputs]) |

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = React.forwardRef(FancyInput);

// You can now get a ref directly to the DOM button:
const fancyInputRef = React.createRef();
<FancyInput ref={fancyInputRef}>Click me!</FancyInput>;

function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;

function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;

useDebugValue(value)

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // 在DevTools靠近这个hook的地方展示一个值
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

import React, { useState, useEffect } from 'react';

type Hook = (friendID: number) => boolean

interface IStatus {
  id: number;
  isOnline: boolean;
}

const useFriendStatus: Hook = (friendID) => {
  const [isOnline, setIsOnline] = useState<boolean | null>(null);

  function handleStatusChange(status: IStatus) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

import * as React from 'react';
import useFriendStatus from './useFriendStatus';

interface IUser {
  id: number;
  username: string;
}

const FriendsListItem ({ user }) => {
  //这里我们就知道这个返回值是个布尔值了
  const isOnline = useFriendStatus(user.id);
  return (
    <li>
      <span style={{ backgroundColor: isOnline ? 'green' : 'red }} />
      <span>
        {user.username}
      </span>
    <li>
  );
};

interface FunctionComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}