我对带有 TypeScript 的 React 中的这个简单组件感到困惑

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 链中）那么，这个例子是否正确？ 当我在 output 中有一个嵌套数组时，我能否在 arguments 中使用许多任何类型？

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

const age: number = 40;

但我没有收到任何错误？

谢谢

Answer 1

当您使用any时，您会错过大多数 typescript 的错误发现能力。 您基本上是在说，“相信我，这很好”，因为any可以分配给任何类型。

有几个地方我们可以改进您的类型，也有一些不准确的类型。 Promise<[]>实际上意味着这是一个空数组[]的 promise 。 您希望它返回一组用户： Promise<User[]> 。

您可能已经在您的应用程序的其他地方输入了此User object。 在这里，我只是定义了该组件所需的属性。

interface User {
    name: {
        first: string;
        last: string;
    }
}

调用fetch返回Promise<Response>其中Response是支持 .json .json()方法的内置 object 类型。 因此，与其(response: any)不如只做(response)并使用推断的类型。 该.json()方法返回Promise<any> ，因此推断的data类型是any 。 此时您可以选择断言data是 object ，其属性results包含User对象数组，但您也可以坚持使用推断的any并依赖函数的返回类型来断言。

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

现在到组件。 我们的 state 是一个User数组，而不是一个空数组。

const [users, setUsers] = useState<User[]>([]);

更改后，您可以从(data: [])和(item: any, index: number)中删除类型。 当您在链中具有适当的类型时，通常不需要在回调中断言类型。 当您调用users.map时，该item已知具有User类型，因为users被键入为User[] 。

Typescript 游乐场链接

Answer 2

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

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

关于const age: number = 40; when you define a const and assign function to that, means you are create a function and TypeScript considers it will be a function and not a primitive value, therefore, you shouldn't add type for const after that name. 但是当你设置这样的东西时： const age: number = 40; 上面的代码意味着，您正在定义一个原始值，并且应该在名称之后设置类型。

Answer 3

使用any是一种蛮力方法，它首先放弃了使用 TypeScript 的所有好处。 它有效，但不推荐。

给定const age = 40 ， TypeScript 知道您正在分配一个数字。 右侧的表达式只能是数字。 它可以从中推断出类型，因此您无需明确说明。