为啥 TS 没有从 Interface 获得 React 状态断言？

Posted 2023-02-16

【中文标题】为啥 TS 没有从 Interface 获得 React 状态断言？

【英文标题】：Why does TS do not get React state assertion from Interface?为什么 TS 没有从 Interface 获得 React 状态断言？

【发布时间】：2019-05-28 13:54:18

【问题描述】：

所以，我有这个组件：

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;：

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

但我收到此错误：

错误:(98, 33) TS7017: 元素隐式具有“任何”类型，因为 type ' searchType: string;属性：从不[]； ' 没有索引签名。

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

readonly state: PropertiesState = 
    searchType: 'buy',
    properties: []
;

错误消失。

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

谢谢！

【参考方案1】：

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

这是因为 TypeScript 从属性声明中推断类型。这些推断的类型会覆盖来自扩展类（例如 React.Component）的任何隐藏类型。

要解决，有几个选项：

通过使用 PropertiesState 注释 state 重新扩展类型 通过投射 state = /* ... */ as PropertiesState 重新加宽。 在构造函数中赋值this.state以避免变窄：

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

【讨论】：

非常感谢，很有帮助！