javascript - 我对 React 和 TypeScript 中的这个简单组件感到困惑

Question

我是 TypeScript 新手，在这个简单的示例中，我创建了一个组件来从虚假 API 获取数据并在 map 迭代中显示它们:

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

const GetData = (): Promise<[]> => {
  return fetch('https://randomuser.me/api/?results=5')
         .then((response: any) => response.json())
         .then((data: any) => data.results);
}

const App: FC<{}> = () => {
  const [users, setUsers] = useState<[]>([]);

  const getUsers = (): void => {
    GetData().then((data: []) => setUsers(data));
  }

  return (
    <div>
      {
        <ul>
          {
            users.map((item: any, index: number) => (
              <li key={`user-${index}`}>{`${item.name.first} {item.name.last}`}</li>
            ))
          }
        </ul>
      }
      <button onClick={getUsers}>Load</button>
    </div>
  )
}

export default App;

这段代码运行良好!但我不确定我的代码是否正确......在这个例子中，我为函数输入输入了 :any 类型(例如在 promise 链中)，那么，这个例子是否正确？当我在输出中有嵌套数组时，我可以在参数中使用许多任何类型吗？

第二个，我没有为 GetData 添加类型 :，但这是一个 const，我应该声明它们像这样的东西:

常量年龄:number = 40;

但我没有收到任何错误？

谢谢

Answer 1

当您使用Promise时generic 来定义一个，你不应该将回调函数的类型添加到链中。例如，像这样写你的链:

const GetData = (): Promise<User[]> => {
    return fetch('https://randomuser.me/api/?results=5')
        .then((response) => response.json())
        .then((data) => data.results);
}

第二个问题是关于const age: number = 40; 当您定义const时并将函数分配给它，意味着您正在创建一个函数，并且 TypeScript 认为它将是一个函数而不是原始值，因此，您不应该为 const 添加类型在那个名字之后。 但是当你设置如下:const age: number = 40; 上面的代码意味着，您正在定义一个原始值，并且应该在名称之后设置类型。