доке вот пример:
ngOnInit() {
this.route.data
.subscribe((data: { crisis: Crisis }) => {
this.editName = data.crisis.name;
this.crisis = data.crisis;
});
}
https://angular.io/docs/ts/latest/guide/router.html
Суть то в чем, data имеет тип:
/** An observable of the static and resolved data of this route. */
data: Observable<Data>;
Где Data это:
/**
* @whatItDoes Represents the static data associated with a particular route.
* See {@link Routes} for more details.
* @stable
*/
export declare type Data = {
[name: string]: any;
};
Когда в TS в типе переменной поля определены как: [name: string]: any; это означает что переменная такого типа может содержать сколько угодно строковых ключей, с любым значением, единственное ограничение вы не можете обращаться к ним как foo.bar т.к. в типе они определены с типо stirng, поэтому компилятор не будет ругаться если вы напишите foo['bar'], вы использовали этот вариант по факту, ваше решение можно использовать прям в subscribe, без дополнительного map, оно будет работать.
Observable в TS имеет декларацию Observable<T>, т.е. он генерик, другие операторы и subsctibe будут использовать этот тип, к примеру полное определение subscribe выглядит так:
subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
как видите там value:T, т.е. если Observable<Data> то значение тоже будет value:Data, т.е. то как вы определил Observable, будет влиять на то какие типы будут ожидать последующие функции, и TS всё это будет проверять. Но конечно же тип может меняться в ходе выполнения цепочки, поэтому некоторые операторы меняю тип возвращаемого Observable и следовательно subscribe будет ожидать другой тип, к примеру так делает оператор map:
export declare function map<T, R>(this: Observable<T>, project: (value: T, index: number) => R, thisArg?: any): Observable<R>;
т.е. на входе у оператора значение типа T, но на выходе значение типа R, в итоге он меняет Observable<T> на Observable<R>, что вы и сделали в своем коде, вы заменили оператором map, Observable<Data> на Observable<any>, потому что любое поле в data имеет тип any, которое вы и вернули
Я обычно использую оператор pluck для этого, он имеет схожую с map сигнатуру:
export declare function pluck<T, R>(this: Observable<T>, ...properties: string[]): Observable<R>;
суть его проста, он выдергивает свойство из объекта, т.к. вы написали так:
data.map( data => data['title'])
//тоже самое с pluck
data.pluck('title')
более красивый вариант как мне кажется.
Ну или можно делать как в доке, инлайнить определение приходящего значения, но это не всегда возможно, зависит от того можно ли привести данное значение к инлайн определению типа. В вашем случае это выглядело бы так:
data.subscribe( (data: {title: string}) => { // теперь data.title будет работать })
Надеюсь изложил не сильно сумбурно
классно, спасибо, мне тоже пригодится:)
Спасибо!
Обсуждают сегодня