Question

这里是有问题的简短代码

data: {
    slides: [
     {
        "code": "contact-details",
        "title": "Contact Details",
     },
    ...
]
}

interface ISlide {
    code: string;
    title: string;
}
 const getSlide = (slideCode: string): ISlide => {
    return data.get('slides').filter((slide: ISlide) => slide.get('code') === slideCode);
}

return (
    <MySlide slide={getSlide('contact-details')} />
)

以上内容在第return data.get('slides').filter((slide: ISlide) => slide.get('code') === slideCode);行有错误 get上没有定义slide。

现在，数据来自所键入的reducer。因此，我认为无需注释slide: ISlide，因为我认为它应该被自动提取。显然并非如此，我确实提供了ISlide的注释，但该注释无效。但是，如果我将幻灯片注释为any，即slide: any，它将起作用。

所以，我的问题很简单。

为什么Typescript无法自动推断slide的类型？
如何通过提供ISlide而不是any作为注释来解决此问题，并且仍然在其上使用不可变属性。

我理想的情况是使用不可变对象扩展我的界面，

interface ISlide extends Immutable {
    code: string;
    title: string;
}

为了完整起见，我添加了reduceR，initialState以及它的类型。

type Data = {
    slides: ISlide[]
}
interface IState {
    data: Data;
}
const rawState: IState = {
    data: {
        slides: []
    }
};

const initialState = fromJS(rawState);

export default function fwCheckoutReducer(state = initialState, action: any) {
    switch (action.type) {
        case 'FETCH_DATA_SUCCESS':
            return merge(state, fromJS({ data: action.data }));
        ...
        default:
            return state;
    }
}

如何使用不可变的类型扩展自定义界面？

0 个答案: