Question

所以，我有这个组件：

trailing: Container(
    height: 60,
    width: 60,
    padding: EdgeInsets.only(left: 10),
    child: Column(
      children: <Widget>[
        new GestureDetector(child: Icon(Icons.arrow_drop_up), onTap: () {}),
        new GestureDetector(child: Icon(Icons.arrow_drop_down), onTap: () {})
      ],
    ),
  )

在这里，我尝试访问状态type TypeofArray< ArrayTypeInstance > = ArrayTypeInstance extends (infer ElementType)[] ? ElementType : never; type Property = { dataId: number; address: string; price?: number; transactionType: string; bedrooms?: number; coverImageUrl?: string; modifiedWhen: string; currentStage?: string; }; type PropertiesState = { searchType: TypeofArray<typeof SEARCH_TYPES>; properties: Property[]; [key: number]: boolean; }; export class Properties extends Component<{}, PropertiesState> { readonly state = { searchType: 'buy', properties: [] }; ...：

[key: number]: boolean;

但是我得到这个错误：

错误：（98，33）TS7017：元素隐式地具有“ any”类型，因为类型为'{searchType：string;属性：never []; }”没有索引签名。

如果我这样显式地注释状态：

 <PropertyCard
                    isFavorite={this.state[property.dataId]}
                />

错误消失。

为什么？修复此错误的更好方法是什么？

谢谢！

Answer 1

声明state = { searchType: 'buy', properties: [] }会将state的类型缩小为{ searchType: 'buy', properties: never[] }（never[]本质上是一个空数组）。根据您的编译器设置，properties可能会缩小为any[]。

发生这种情况是因为TypeScript从属性声明中推断类型。这些推断的类型会覆盖扩展类（例如React.Component）中的任何阴影类型。

要解决，有几种选择：

通过用state注释PropertiesState来重新扩展类型
通过强制转换state = { /* ... */ } as PropertiesState重新扩大。
在构造函数中分配this.state以避免变窄：

export class Properties extends Component<{}, PropertiesState> {
    constructor(props: {}) {
        super(props);
        state = {
            searchType: 'buy',
            properties: []
        };
    }
    // ...
};

为什么TS无法从接口获得React状态声明？

1 个答案: