使用 useState (React) 时，如何让 TS 检查任何类型？

Question

import { useEffect, useState } from 'react'

export type TTOrigin = {
  name: 'Name1' | 'Name2'
  url: string
}

export function App() {
  const [data, setData] = useState<TTOrigin[]>([])

  useEffect(() => {
    fetch('https://swapi.dev/api/people/1/')
      .then((res) => res.json())
      .then((json) => setData(json))
      .catch((err) => console.log(err))
  }, [])

  return <h1>App</h1>
}

JSON 的类型为any。但TS允许将其放入setData中。虽然在 useState 中指定了 TTOrigin 类型

Answer 1

Typescript 中的规则是不对涉及

any

类型变量的代码进行类型检查。

这基本上意味着，对于所有此类代码部分，Typescript 将表现为 JavaScript，开发人员再次负责进行类型检查（这真的是一个数组/字符串/数字）、内容检查（这个字符串真的只是“Y”还是“N”），属性名称检查等等。

下面的示例代码运行后将显示 string 变量

a

可以突然包含一个数字

3

:

let a: string = "x"
let b: any = 3
a = b;
console.log(a)
console.log(typeof a)

TS 游乐场：https://www.typescriptlang.org/play/?#code/FAGwpgLgBAhgXFAzhATgSwHYHMoF4oBEAHgaJFAEYIwYCeeUAzMDAxQNzADGA9hoj3AA6EDywAKGAEpufAcNESItAA5geAM1gzgwIA