如果已经使用了接口，是否需要在useState中重新定义类型？

Question

考虑这段代码：

IAppStateProps.ts

：

import {INoteProps} from "./INoteProps";

export interface IAppStateProps {
  notesData: INoteProps[];
}

然后在这里使用它：

useAppState.ts

：

import {INoteProps} from "./interfaces/INoteProps";
import {IAppStateProps} from "./interfaces/IAppStateProps";
export const useAppState = (): IAppStateProps => {
  const [notesData, setNotesData] = useState<INoteProps[]>([]);
  ...more code
  return {
    notesData
  }
};

我的问题是，既然我定义了

useAppState

的返回类型为

IAppStateProps

，并且它知道

notesData

应该返回

INoteProps[]

，那么是否有必要在

const [notesData, setNotesData] = useState<INoteProps[]>([]);

中再次定义返回类型？

Answer 1

如果我正确理解了这个问题。不，您不需要指定它。 当您调用 useAppState 时，它应该返回一个具有属性notesData 的对象，该属性是一个数组。

Answer 2

既然我定义了useAppState的返回类型为IAppStateProps，并且它知道notesData应该返回INoteProps[]，那么是否需要在const [notesData, setNotesData] = useState([]);中再次定义返回类型？

是的。 TypeScript 无法按照您所描述的方向推断它。如果您在对

useState

的调用中保留类型参数，并使用像这样的空数组作为初始值，TypeScript 会将

never[]

推断为类型，这意味着您将无法使用以下命令调用

setNotesData

真实数据。

如果你愿意，你可以通过另一种方式推断它，通过在

useAppState

上省略返回类型注释：

export const useAppState = () => {
    const [notesData, setNotesData] = useState<INoteProps[]>([]);

    // ...

    return {
        notesData
    };
};

游乐场示例

TypeScript 会将返回类型推断为

{ notesData: INoteProps[]; }

。由于 TypeScript 的类型系统是 structural（基于类型的 shape）而不是 nominal（基于类型的名称），这与

IAppStateProps

相同。

不过，您可能不想这样做，因为意外更改函数返回类型的错误编辑不会被 TypeScript 捕获。在实践中，我发现推断返回类型对于非常短、简单的函数来说是很好的，但对于除此之外的任何东西，我需要指定返回值应该是什么的安全网，以便尽早捕获更改它的错误。你的旅费可能会改变。 :-)