前言：

TypeScript给JavaScript和ReactJS生态系统带来了巨大的变化。它提高了开发效率，TypeScript的项目往往更加可靠，以及在开发过程中更容易排查bug。这篇文章总结了一些我在学习TypeScript中，如何使用useState，并声明state类型。

useState源码

首先，让我们来看看React源码中的useState是如何声明的。

// ...
/**
 * Returns a stateful value, and a function to update it.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usestate
 */
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
// convenience overload when first argument is ommitted
/**
 * Returns a stateful value, and a function to update it.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usestate
 */
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
// ...

在React源码中，useState有两个函数。第二个函数重写（override）了第一个函数，使我们可以在调用useState时不直接声明state变量类型。

值得注意的是，第一个方法接一个名为S的TypeScript泛型，通过它，我们可以定义state的变量类型。

useState基础用法

以下是在TypeScript中使用useState的基本例子。

import React, {useState} from 'react'

export default function App() {
  const [name, setName] = useState<string>('未定义变量')
  const [age, setAge] = useState<number>(28)
  const [isProgrammer, setIsProgrammer] = useState<boolean>(true)

  return (
    <div>
      <ul>
        <li>Name: {name}</li>
        <li>Age: {age}</li>
        <li>Programmer: {isProgrammer ? 'Yes' : 'No'}</li>
      </ul>
    </div>
  )
}

如果你在set函数中的参数不符合声明的变量类型，程序会报错。

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

export default function App() {
  const [name, setName] = useState<string>('未定义变量')
  const [age, setAge] = useState<number>(28)
  const [isProgrammer, setIsProgrammer] = useState<boolean>(true)

  useEffect(() => {
    // Error: Argument of type '28' is not assignable to parameter of type 'SetStateAction<string>'.ts(2345)
    setName(28)
    // Error: Argument of type 'true' is not assignable to parameter of type 'SetStateAction<number>'.ts(2345)
    setAge(true)
    // Error: Argument of type '"Gabriel Rufino"' is not assignable to parameter of type 'SetStateAction<boolean>'.
    setIsProgrammer('未定义变量')
  }, [])

  return (
    <div>
      <ul>
        <li>Name: {name}</li>
        <li>Age: {age}</li>
        <li>Programmer: {isProgrammer ? 'Yes' : 'No'}</li>
      </ul>
    </div>
  )
}

但是对于JavaScript原始类型，我们其实不需要声明变量类型，因为TypeScript可以自己判断相应的变量类型。

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

export default function App() {
  const [name, setName] = useState('未定义变量')
  const [age, setAge] = useState(28)
  const [isProgrammer, setIsProgrammer] = useState(true)

  return (
    <div>
      <ul>
        <li>Name: {name}</li>
        <li>Age: {age}</li>
        <li>Programmer: {isProgrammer ? 'Yes' : 'No'}</li>
      </ul>
    </div>
  )
}

useState进阶用法

当我们需要使用useState处理复杂数据时（如数组或者对象），我们需要借用TypeScript中接口（interface）这个概念。

假设我们需要在useState中声明如下数据。

[
  {
    "id": 1,
    "name": "蔡文姬",
    "type": "辅助"
  },
  {
    "id": 1,
    "name": "后裔",
    "type": "射手"
  },
  {
    "id": 1,
    "name": "鲁班7号",
    "type": "射手"
  }
]

我们需要首先定义一个代表这组数据类型的接口（interface）。

interface IChampion {
  id: number;
  name: string;
  type: string;
}

然后我们在使用useState中，声明我们的state为Champion类型变量。

import React, {useState} from 'react'

interface IChampion {
  id: number;
  name: string;
  type: string;
}

export default function Champions() {
  const [champions, setChampions] = useState<IChampion[]>([
    {
      id: 1,
      name: '蔡文姬',
      type: '辅助'
    },
    {
      id: 1,
      name: '后裔',
      type: '射手'
    },
    {
      id: 1,
      name: '鲁班7号',
      type: '射手'
    }
  ])

  return (
    <div>
      <ul>
        {champions.map(champion=> (
          <li key={champion.id}>{champion.name} - {champion.type}</li>
        ))}
      </ul>
    </div>
  )
}

但通常，我们会从API中异步获取数据，而非在useState中直接声明变量。

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

interface IChampion {
  id: number;
  name: string;
  type: string;
}

export default function Champions() {
  const [champions, setChampions] = useState<IChampion[]>([])

  useEffect(() => {
    axios.get<IUser[]>('https://api.yourservice.com/champions')
      .then(({ data }) => {
        setChampions(data)
      })
  }, [])

  return (
    <div>
      <ul>
        {champions.map((champion: IChampion) => (
          <li key={champion.id}>{champion.name} - {champion.type}</li>
        ))}
      </ul>
    </div>
  )
}

以上就是在React TypeScript，useState的一些用法。

--阅读更多文章，请关注我的公众号：未定义变量