Translate Firestore value updates into a TypeScript object

Question

Here are the interfaces I'm working with:

interface Item {
    data: string
}

interface Test {
    item: Item
    url: string
}

In Firestore, my data is stored in the following format:

Collection Tests
    id: {
        item: {
            data: "some data"
        },
        url: "abc.com",
    }
}

I'm wondering how I can properly type the incoming objects when reading from a collection.

this.db.collection('tests').valueChanges().subscribe(tests => {
    // Need to perform some kind of type conversion here
});

Alternatively, could I specify the type like this:

this.db.collection('tests').valueChanges().subscribe<Test[]>(tests => {
    tests[0].url // TypeScript will recognize this as valid
});

Answer 1

Answer №1

Latest Update

The easiest way to receive a typed result is by specifying the type after collection, as explained in this documentation

this.db.collection<Test>('tests').valueChanges().subscribe(tests => {
    // ....
});

Previous Method

This was my initial approach, but I am searching for a more straightforward solution.

this.db.collection('tests').valueChanges().pipe(
    map(tests => {
        return tests as Test[];
    })
).subscribe(fs_tests => {
    // ....
});

Answer 2

Latest Update

The easiest way to receive a typed result is by specifying the type after collection, as explained in this documentation

this.db.collection<Test>('tests').valueChanges().subscribe(tests => {
    // ....
});

Previous Method

This was my initial approach, but I am searching for a more straightforward solution.

this.db.collection('tests').valueChanges().pipe(
    map(tests => {
        return tests as Test[];
    })
).subscribe(fs_tests => {
    // ....
});