3分钟掌握hook在typescript中的姿势

// 这里ts可以推断 value的类型并且能对setValue函数调用进行约束
const [value, setValue] = useState(0);

interface MyObject {
  foo: string;
  bar?: number;
}

// 这里需要传递MyObject才能约束 value, setValue
// 一般情况下推荐传入类型
const [value, setValue] = useState<MyObject>(null);

type Theme = 'light' | 'dark';
// 我们在createContext就传了类型了
const ThemeContext = createContext<Theme>('dark');

const App = () => (
  <ThemeContext.Provider value="dark">
    <MyComponent />
  </ThemeContext.Provider>
)

const MyComponent = () => {
    // useContext根据ThemeContext推断出类型，这里不需要显示传
  const theme = useContext(ThemeContext);
  return <div>The theme is {theme}</div>;

const value = 10;
// 推断出result是number类型
const result = useMemo(() => value * 2, [value]);

const multiplier = 2;
// 推断出 (value: number) => number
// 注意函数入参value需要定义类型
const multiply = useCallback((value: number) => value * multiplier, [multiplier]);

const MyInput = () => {
  // 这里约束inputRef是一个html元素
  const inputRef = useRef<HTMLInputElement>(null);
  return <input ref={inputRef} />
}

// 自动推断出 myNumberRef.current 是number类型
const myNumberRef = useRef(0);
myNumberRef.current += 1;

interface State {
  value: number;
}

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'incrementAmount'; amount: number };

const counterReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { value: state.value + 1 };
    case 'decrement':
      return { value: state.value - 1 };
    case 'incrementAmount':
      return { value: state.value + action.amount };
    default:
      throw new Error();
  }
};

// 这里可以推断出state为State类型
const [state, dispatch] = useReducer(counterReducer, { value: 0 });

//能够约束传入dispatch的参数，符合Action类型
dispatch({ type: 'increment' });
dispatch({ type: 'decrement' });
dispatch({ type: 'incrementAmount', amount: 10 });

// TypeScript compilation error
dispatch({ type: 'invalidActionType' });

// MyInputHandles 需要给父组件的useRef作为类型使用 和 RefForwardingComponent作为泛型参数传入约束
export interface MyInputHandles {
  focus(): void;
}

// 使用RefForwardingComponent 类型进行定义组件，第一个泛型参数是对外暴露的handle，第二个是Props
const MyInput: RefForwardingComponent<MyInputHandles, MyInputProps> = (
  props,
  ref
) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    // 这里的返回会自动使用MyInputHandles进行类型约束
    focus: () => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    },
  }));

  return <input {...props} ref={inputRef} />;
};

// 函数组件必须使用forwardRef才能让外部组件使用该组件的ref
export default forwardRef(MyInput);

// 父组件
const Autofocus = () => {
  // 能够约束 myInputRef.current的类型
  const myInputRef = useRef<MyInputHandles>(null);

  useEffect(() => {
    if (myInputRef.current) {
      myInputRef.current.focus();
    }
  });

  return <MyInput ref={myInputRef} />
}