React+TypeScript教程之3 - useState

由微软推出的TypeScript自从一推出就广受关注，现在无论开发前端React/Vue，还是后端API，很多项目中都广泛接受了TypeScript。下面介绍如何通过TypeScript使用React中的useState Hook。

useState基本用法

由于TS中强大的类型推断功能，在一般场合使用useState的时候，似乎感觉不到TS的存在，比如这个组件：

import { useState } from "react";

export default function Hello() {
  const [paid, setPaid] = useState(false);
  const handleClick = (): void => {
    setPaid(!paid);
  }  

  return <div>
            Paid? {paid? 'Yes': 'No'}<br/>
            <button onClick={ handleClick }>
                {
                    paid? 'Cancel': 'Pay'
                }
            </button>
        </div>;
}

但一旦在VS Code中把鼠标移动到paid, setPaid上的时候，就会看到提示的类型信息。同时，如果在调用setPaid的时候，如果传入错误的类型，TS会提示。

使用类型声明

再看一个稍微复杂一点的例子：

import { useState } from "react";

type Payment = {
  userid: string
  amount: number
  date: Date  
}

export default function Hello() {
  const [paid, setPaid] = useState(false);
  const [payment, setPayment] = useState<Payment | null>(null);

  const handleClick = (): void => {
    if(!paid) {
        setPayment({
            userid: '9901',
            amount: 100,
            date: new Date()
        });
    }
    setPaid(!paid);
  }  

  return <div>
            Paid? {paid? 
                payment?.userid + ' / ' + payment?.amount + ' / ' + payment?.date
                : 
                'No'}<br/>
            <button onClick={ handleClick }>
                {
                    paid? 'Cancel': 'Pay'
                }
            </button>
        </div>;
}

首先是使用泛型来定义传递给setState的参数类型：

const [payment, setPayment] = useState<Payment | null>(null);

接下来可以使用这种TS中的语法，只有payment不为空时才执行：

payment?.userid

使用类型断言

在上面的声明中，也可以使用类型断言：

const [payment, setPayment] = useState<Payment>({} as Payment);

这样在后面使用的时候，就无需使用payment?.xxx了：

payment.userid + ' / ' + payment.amount + ' / ' + payment.date