Тип "{}" нельзя назначить типу "Только для чтения <HelloProps>"

Question

Я пытаюсь внедрить магазины в компонент, но кажется, что он не работает.
Вот класс

import * as React from 'react';
import { inject, observer } from 'mobx-react';

import { FlightStore } from '../stores/FlightStore';

export interface HelloProps {
   flightStore: FlightStore
}



@inject('flightStore')
@observer
class Hello extends React.Component<HelloProps, any> {

constructor(props: HelloProps) {
    super(props);
    this.state = {
        //
    }
}


componentWillMount() {
    this.props.flightStore.getData();
}

render() {
    return (
        <div>

        </div>
    )
}
}

export default Hello;

Там написано Type '{}' is not assignable to type 'Readonly<HelloProps>'. Property 'flightStore' is missing in type '{}', меня это смущает, потому что я нигде не объявляю какой-либо тип данных, поэтому я не знаю, что происходит.

Вот магазин

import { action, observable } from 'mobx';
import *  as $ from 'jquery' ;


export class FlightStore {

@observable dataJ: any;

constructor() {
    //
}

@action getData() {

    $.ajax({
        url: 'https://www.kayak.com/h/mobileapis/directory/airlines',
        dataType: 'json',
        cache: false,
        success: (data: any) => {
            this.dataJ = data;
            console.log(data)
        },
        error: (xhr: any, status: any, err: any) => {
            console.log(err);
        }
    })
    console.log('I´m in getData')
}

}

Странно, потому что когда я пытаюсь поставить "?" в классе

export interface HelloProps {
  flightStore?: FlightStore
}

это говорит, что this.props.flightStore => [ts] Object is possibly 'undefined'. в ComponentWillMount ()

Обновление

И да, ошибка возникает, когда я пытаюсь использовать <Hello/> компонент без прохождения реквизита, потому что я использую Mobx.
Индексное приложение

import * as React from 'react';
import Hello from './components/Hello';

import stores from './stores'; 
import { Provider } from 'mobx-react';


 export default class App extends React.Component {
 render() {
    return (
        <Provider {...stores}>
            <div>
                <Hello />
            </div>
        </Provider>
    );
  }
}

Answer 1

Я предполагаю, что исходная ошибка произошла, когда вы пытались использовать компонент как <Hello/> без передачи реквизитов. Hello объявлен как требующий flightStore проп. Вы бы надеялись, что @inject предоставит это, и TypeScript будет знать, что вам не нужно передавать его самостоятельно, но это, похоже, не работает. Итак, посмотрите на декларацию @inject:

// Ideally we would want to return React.ComponentClass<Partial<P>>,
// but TS doesn't allow such things in decorators, like we do in the non-decorator version
// See also #256
export function inject(
    ...stores: string[]
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<T>
export function inject<S, P, I, C>(
    fn: IStoresToProps<S, P, I, C>
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<T>

И если вы перейдете к указанной проблеме , вы обнаружите, что проблема не решена, и есть некоторые предлагаемые обходные пути. Один из них - объявить опцию необязательной, как вы делали во второй версии, а затем использовать ненулевое утверждение при доступе к ней: this.props.flightStore!.