reactjs 如何定义具有扩展类型并由函数返回的useState对象的属性，同时保持可读性？

ajsxfq5m 于 2023-01-17 发布在 React

关注(0)|答案(2)|浏览(117)

我正在体验在React状态下使用TypeScript。我的意图是使用具有严格类型的对象，而不是几个单独的useState语句，并且希望没有额外的类来表示这些对象结构（只有接口）。我有以下场景：

const [state, setState] = useState<IStateType>(..code1..);

在上面的行中，IStateType扩展了另一个接口，我们称之为IStateSubType：

export interface IStateType extends IStateSubType {...}

由于IStateSubType的对象在我的项目中被示例化了不止一次，我将创建一个函数来初始化这些对象，以减少代码冗余：

function getEmptyStateSubType(): IStateSubType(..code2..);

在这个函数中，code2 part将定义IStateSubType所需的属性并返回结果对象。我将在 code1 part中调用getEmptyStateSubType()，然后我将用IStateType所需的缺失属性扩展其返回对象的属性，如下所示：

const [state, setState] = useState<IStateType>(
  (): IStateType => {
    const tmpValue: IStateSubType = getEmptyStateSubType();
    const value: IStateType = {
      ...tmpValue,
      foo: bar
    };
    return value;
  }
);

使用上面的实现，我确实实现了在状态和函数中严格使用类型的目标，也没有多余的行，但在一天结束时，不仅我的代码行数增加了，而且我还觉得可读性大大降低，同时不必要的复杂性增加了。我想知道是否有更好的解决方案来实现我的目标：保持可读性并加强类型的使用。2如何用更短更可读的代码来实现这一点？

reactjs

来源：https://stackoverflow.com/questions/75132922/how-to-define-the-properties-of-a-usestate-object-having-extended-type-and-retur

2条答案

按热度按时间

oalqel3c1#

这个应该可以

const [state, setState] = useState<IStateType>(
    () => ({...getEmptyStateSubType(), foo: 'bar' })
);

但是没有什么可以阻止您创建getStateType函数

const getStateType =
    (o: Omit<IStateType, keyof IStateSubType>): IStateType =>
        (({...getEmptyStateSubType(), ...o}))

const [state, setState] = useState<IStateType>(getStateType({ foo: 'bar' }));

赞(0）回复(0）举报 2023-01-17

bjp0bcyl2#

虽然我的问题相当模糊，但对于今后面临类似问题的任何人，请允许我分享我为实现这一目标所做的第二次尝试：

const [state, setState] = useState<IStateType>(
  () => { // I removed the type, since it is already enforced by useState
    const value: IStateType = {
      ...getEmptyStateSubType(), // I used spread on method return value
      foo: bar
    };
    return value;
  }
);

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 如何定义具有扩展类型并由函数返回的useState对象的属性，同时保持可读性？

2条答案

相关问题

热门标签

最新问答