What is the correct method for specifying the date field in my TypeScript interface that will be retrieved from my cloud function?

Context: Utilizing Vue to interact with cloud functions for accessing data from firestore (avoiding direct firestore queries). A function is called wherein one field returns firestore's timestamp representation (seconds, nanoseconds). Also, I'm a novice in typescript/Vue, so forgive any oversight on my part.

Here is the model class I defined:

<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 encountering challenges in parsing and storing the create_date value.

  1. The current approach of retrieving nanoseconds and seconds to recreate the Timestamp and then calling toDate() feels clunky. Is there a more elegant solution?
  2. VSCode displays this error, though the code runs smoothly. "Property '_seconds' does not exist on type 'Date'.Vetur(2339)" It indicates an issue with how _seconds and _nanoseconds are defined in the data() function.

Is there a more efficient way to define and fetch the date?

  1. The warning for o.create_date = tempCreateDate.toDate() states: Identifier 'create_date' is not in camel case.eslint@typescript-eslint/camelcase The cloud function returns create_date in this format, so changing it to camel case isn't feasible.

Any potential solutions to address this warning?

Answer №1

My expertise lies in Typescript rather than Firebase, so I will focus on that aspect. If your data structure for create_date looks like this:

{
  _seconds: number;
  _nanoseconds: number;
}

You can define an interface for it as follows:

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

By doing this, you should resolve any TypeScript errors related to create_date as TypeScript now recognizes its structure.

If you later decide to convert o.create_date to an actual Date, you can modify the interface-definition accordingly:

<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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Ajax to make JSON requests using jQuery

I could really use some assistance here. I have a JSON file and I am attempting to retrieve only one image file by specifying its position, like the first one, for example. Is this achievable? I have experimented with various methods but it seems like some ...

Updating a Zendesk ticket with multiple comments

I've been attempting to update a ticket on Zendesk using their API and adding multiple comments. However, it seems that I might be utilizing the incorrect format as the comments are not showing up on my Zendesk dashboard... The JSON format I'm c ...

Can a library be developed that works with both Java and JavaScript/TypeScript?

I specialize in Angular development. Our front- and backend both contain specialized calculation methods that work like magic. Although the classes are the same, any bugs found in the calculations have to be fixed separately in two different projects. Is ...

Utilizing CSS files to incorporate loading icons in a component by dynamically updating based on passed props

Is it possible to store icons in CSS files and dynamically load them based on props passed into a component? In the provided example found at this CodeSandbox Link, SVG icons are loaded from the library named '@progress/kendo-svg-icons'. Instea ...

Issue with fixed header in Vuetify v-data-table not functional

While working with the Vuetify v-data-table component, I have enabled the fixed-header property. However, I have noticed that the table header is scrolling along with the table body. I am using the latest version of Chrome. Does anyone know how to addres ...

Guide on extracting a single key and transforming it into a class with the help of GSON

Below is the JSON data: { "timestamp":"04295d4f-2a6f-4a38-a818-52108cbdc358", "lastFullSyncDate":null, "ftpInfo":null, "listingInfo":{ "itemID":"110179365615", "itemTitle":"test", "itemPrice":"88.223529411 ...

Interacting with AWS SQS message generated by S3 using Python

When a file gets uploaded to S3, I find it useful that S3 can generate a message in SQS. However, retrieving the file name ("key":"filename.txt") from the dictionary structure in the SQS message body using Python proves to be a bit challenging due to the p ...

Tips for establishing control when retrieving the JSON information

I have encountered a challenge while developing a currency converter application. The issue I am facing is related to the order of data. My app fetches information from two JSON files - one containing prices and the other containing full names of currencie ...

Launching Node Application

While working with NestJS and IIS, I encountered an issue when deploying my 'dist' folder on the server using IISNode. The error message 'module not found @nestjs/core' prompted me to install the entire 'package.json' files (n ...

Collect the GET parameters as an array of strings when there is only one value

How can I properly pass a string array as a parameter for a GET call? // Passing one value param: filters=Something value: filters: 'Something' // Passing multiple values param: filters=Something&filters=Something else value: filters: [ &ap ...

What is the best method for creating new JSON files that include a single quote from an existing JSON file?

Recently, I have developed a script that is capable of processing 5,000 JSON files by replacing a specific number that appears twice in each file. The intention is to generate a new JSON file and delete the old one, including transferring additional data i ...

Creating Live Updates with Laravel Sanctum (SPA) - Implementing Private Channel Broadcasting in Real-Time Notifications

In my project, I am using Laravel -v7.x and Vue CLI in two separate folders for Frontend and Backend. I have successfully configured Laravel Sanctum (SPA) Authentication. Now, the challenge I am facing is creating real-time notifications when certain event ...

Exploring a new approach to organizing data with LocalStorage and AngularJS

I developed an application that utilizes LocalStorage to store data. The issue I encountered was storing a large number of objects under a single key, causing the DOM to become blocked. This is due to the necessity of parsing and stringifying the JSON dat ...

Having issues with triggering click events using querySelector in Angular 2

Having trouble using querySelector with click() method in Angular it is causing a compilation error: 'click' is not recognized as a method on type 'Element' document.body.querySelector(".class").click(); ...

Enhancing UI design with Vue.js

I'm attempting to customize elements using data from a JSON file in Vue.js: <div v-for="(item, index) in json._items" class="help-inner-callout" v-html="item.text" style="top:item.top; left: item.left;">&l ...

Disregard periods in URLs when configuring nginx servers

While developing with Vite in development mode via Docker on my Windows 10 machine, I encountered an issue where the local custom domain would not load due to a required script failing to load. The specific script causing the problem is /node_modules/.vit ...

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

AppLazyLoadingMoudle import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; const ROUTES : Routes = [ /* ProductModule (defined in the feature module) is loaded lazily when navigating ...

Conditional type/interface attribute typing

Below are the interfaces I am working with: interface Movie { id: number; title: string; } interface Show { title: string; ids: { trakt: number; imdb: string; tmdb?: number; }; } interface Props { data: Movie | Show; inCountdown ...

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...