React新特性hooks——如何在TypeScript中使用

React中的hooks可以说是16版本中最秀的一个操作了，关于它的详细信息可以看这里。

首先，我们写一个JavaScript的例子

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

const Demo = () => {
  const initState = {
    intNum: 1,
  };

  // 数据加载状态
  const [intNum, setIntNum] = useState(initState.intNum);

  // 初始化
  useEffect(() => {
    console.log('初始化了')
  }, []);

  return (
    <div>
      我是hooks组件${intNum}
      <button onClick={() => setIntNum(2)}>点击+1</button>
    </div>
  );
};

export default Demo;

那么，这个例子如何在TypeScript中书写呢

import React, { useEffect, useState, FunctionComponent } from 'react';
import { ConnectProps } from '@/models/connect';

interface IState {
  intNum: number;
}

const Demo: FunctionComponent<ConnectProps> = () => {
  const initState: IState = {
    intNum: 1,
  };

  // 数据加载状态
  const [intNum, setIntNum] = useState(initState.intNum);

  // 初始化
  useEffect(() => {
    console.log('初始化了')
  }, []);

  return (
    <div>
      我是hooks组件${intNum}
      <button onClick={() => setIntNum(2)}>点击+1</button>
    </div>
  );
};

export default Demo;

额。其实就是加了几个类型吧，然后其他都是一样的，基本上没有大的区别