Proper way to define the date field of my typescript interface that will be loaded from my cloud function?

Question

Background: I'm using Vue and am interacting with cloud functions in order to retrieve data from firestore (I'm not querying the firestore directly). I'm calling a function where one of the fields returns the internal representation of firestore's timestamp (seconds, nanoseconds). Also, I'm totally new to typescript/Vue, so apologies if I'm missing something obvious.

I defined a model class like such:

<script lang="ts">
interface Order {
  order_id: number
  uid: string
  create_date: Date //{ _seconds: number; _nanoseconds: number } ... from Firestore timestamp
}

export default Vue.extend({
  data() {
    return {
      userOrderInfo: [] as Order[],
    }
  },
  methods: {
    getUserOrders() {
      userOrders({ uid: this.$store.state.uid })
        .then(result => {
          const orderList: Order[] = JSON.parse(JSON.stringify(result.data))
          const filteredOrders: Order[] = []
          orderList.forEach(o => {
              filteredOrders.push(o)
              const tempCreateDate = new firebase.firestore.Timestamp(
                o.create_date._seconds,
                o.create_date._nanoseconds,
              o.create_date = tempCreateDate.toDate()
            }
          })

I'm having a problem with how I'm parsing and storing the create_date.

1. It seems ugly to me and I feel like there's probably a more elegant way to get it. It seems crude to have to get the nanoseconds and seconds and then recreate the Timestamp to call toDate().
2. VSCode is giving me this error, but everything seems to run fine. "Property '_seconds' does not exist on type 'Date'.Vetur(2339)" It doesn't like how I defined _seconds and _nanoseconds in the data() definition.

Is there a better way to define my date and retrieve it?

3. o.create_date = tempCreateDate.toDate() is giving me this warning: Identifier 'create_date' is not in camel case.eslint@typescript-eslint/camelcase The problem is the cloud function is returning create_date in this format, so I can't make it camel case.

Is there any solution for this besides enduring this warning?

Answer 1

I'll just address the Typescript part because I haven't used Firebase and don't know how you could refactor the result of Firebase.

If your create_date has the following structure:

{
  _seconds: number;
  _nanoseconds: number;
}

you can define that as an interface.

<script lang="ts">
interface Order {
  order_id: number;
  uid: string;
  create_date: ResponseDate;
}
// please choose a more fitting name :)
interface ResponseDate {
  _seconds: number;
  _nanoseconds: number;
}

This should get rid of your VSCode TypeScript error because Typescript now properly understands what create_date is.

Now if you want to later update o.create_date to an actual Date, you need to add that to your interface-definition.

<script lang="ts">
interface Order {
  order_id: number;
  uid: string;
  create_date: ResponseDate | Date; // Can be a ResponseDate or a Date
}
interface ResponseDate {
  _seconds: number;
  _nanoseconds: number;
}