字符串不可分配给 keyof Readonly<T> 打字稿

Question

我在使用打字稿将字符串分配到反应组件状态时遇到问题

export default class MainSection extends React.Component<{}, MainSectionState> {
    state = {
        filter: 'showAll'
    };
}

interface MainSectionState {
    filter: keyof TodoFilter;
}

type TodoFilterCallback = (todo: Todo) => boolean;
type TodoFilter = { 
    showAll: TodoFilterCallback,
    showActive: TodoFilterCallback,
    showCompleted: TodoFilterCallback,
};

在这种情况下，应该可以使用“showAll”初始分配过滤器，但在下面抛出编译错误

error TS2415: Class 'MainSection' incorrectly extends base class 'Component<MainSectionProps, MainSectionState>'.
  Types of property 'state' are incompatible.
    Type '{ filter: string; }' is not assignable to type 'Readonly<MainSectionState>'.
      Types of property 'filter' are incompatible.
        Type 'string' is not assignable to type '"showAll" | "showActive" | "showCompleted"'.

这个问题我该怎么办？我正在使用 typescript 2.3.2、react 15.5.4、redux 3.6 和 react-redux 5.0.5

谢谢

Answer 1

{filter: 'showAll'} 表达式的类型是{filter: string}，比state 的类型更宽。那是因为string 是'showAll' | 'showActive' | 'showCompleted'（状态中filter 属性的类型）的更广泛的类型（超类型）。看来您需要使用类型转换：

state = <MainSectionState>{filter: 'showAll'};