Convert Firestore value changes to Typescript object

Question

I have the interfaces:

interface Item {
    data: string
}

interface Test {
    item: Item
    url: string
}

My data in Firestore is stored as follows

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

How can I type the incoming objects on a collection read?

this.db.collection('tests').valueChanges().subscribe(tests => {
    // Do some sort of type conversion
});

Or better yet could I do something like this:

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

So, to be clear, are you saying that your document contains an object type field named item which has a string property called data? — Doug Stevenson
– Doug Stevenson, Commented Aug 13, 2019 at 20:30
The documents field item is a Firestore Map with a key data — user1222324562
– user1222324562, Commented Aug 13, 2019 at 20:35

user1222324562 · Accepted Answer · 2019-08-14 19:13:40Z

1

Updated

According to this the simplest way to achieve a typed result is by adding the type after collection

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

Old Answer

This is the only solution I have come up with, but I am looking for something more readable

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

edited Aug 14, 2019 at 19:13

answered Aug 13, 2019 at 20:34

user1222324562

1,0952 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doug Stevenson Over a year ago

If you just want a straight cast (assuming that the document always exactly matches your interfaces), it's not going to get any simpler than this.

Collectives™ on Stack Overflow

Convert Firestore value changes to Typescript object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related