valueChanges() loses type information

Using Angularfire2@5.0.0-rc.3.

Calling .valueChanges() on an AngularFireObject<T> should return an Observable<T | null>, but instead returns Observable<{} | null>.

Similarly, calling .valueChanges() on an AngularFireList<T> should return an Observable<T[]>, but instead returns Observable<{}[]>.

This results in error messages for code that should be correct. For example, the following code:

interface FooBar {
	foo: string;
	bar: number;
}

afDb.object<FooBar>("/foo-bar/1")
	.valueChanges()
	.subscribe(fooBarItem => {
		if (fooBarItem !== null) {
			console.log(`Foo: ${fooBarItem.foo}, Bar:${fooBarItem.bar}`);
		}
	});

afDb.list<FooBar>("/foo-bar")
	.valueChanges()
	.subscribe(fooBarArray => {
		fooBarArray.forEach(fooBarItem => {
			console.log(`Foo: ${fooBarItem.foo}, Bar:${fooBarItem.bar}`);
		});
	});

yields the following TypeScript errors on the console.log() statements:

Property 'foo' does not exist on type '{}'. 
Property 'bar' does not exist on type '{}'. 
Property 'foo' does not exist on type '{}'. 
Property 'bar' does not exist on type '{}'. 

I think fixing this problem is simply a matter of setting the return type explicitly for the .valueChanges() function.

[jaufgang]

i think a more elegant workaround until this gets fixed would be to explicitly cast the output of .valueChanges() to your desired type

(afDb.object<FooBar>("/foo-bar/1")
	.valueChanges() as Observable<FooBar>)
	.subscribe(fooBarItem => {
		if (fooBarItem !== null) {
			console.log(`Foo: ${fooBarItem.foo}, Bar:${fooBarItem.bar}`);
		}
	});

(afDb.list<FooBar>("/foo-bar")
	.valueChanges() as Observable<FooBar[]>)
	.subscribe(fooBarArray => {
		fooBarArray.forEach(fooBarItem => {
			console.log(`Foo: ${fooBarItem.foo}, Bar:${fooBarItem.bar}`);
		});
	});

[zaki-arain]

Despite creating a complete interface that reflected my database… I had to add [propName: string]: any; to my interface to get it to stop complaining… pretty ugly stuff.