Is the parameter rejecting the use of orderBy for 'startTime'?

Hey there! I'm currently working on an AngularJS project in TypeScript that involves integrating Google API to fetch Google Calendar events. The syntax for making a call is specified in the documentation available at: https://developers.google.com/google-apps/calendar/v3/reference/events/list. However, I encountered an issue where the

gapi.client.calendar.events.list(params)

method does not seem to accept the parameter orderBy: 'startTime'

getCalendarEvents() {
    return gapi.client.calendar.calendarList.list().then(response => {
        let calendars = response.result.items;
        if (calendars === undefined) return [];
        console.log(calendars);
        let requests = calendars.map(calendar => {
            //let params = { calendarId: calendar.id, timeMin: (new Date()).toISOString(), showDeleted: false, singleEvents: true, maxResults: 10 };
            let params = { 
                calendarId: calendar.id, 
                timeMin: (new Date()).toISOString(), 
                showDeleted: false, 
                singleEvents: true, 
                orderBy: 'startTime' };
            return gapi.client.calendar.events.list(params).then(response => {
                console.log(response.result.items);
                let events: any = response.result.items.sort((a, b) => { // sorting array of events by date
                    if (a.start.date) a.start['newdate'] = a.start.date;
                    if (b.start.date) b.start['newdate'] = b.start.date;
                    if (a.start.dateTime) a.start['newdate'] = a.start.dateTime.slice(0, 10);
                    if (b.start.dateTime) b.start['newdate'] = b.start.dateTime.slice(0, 10);
                    if (a.start['newdate'] > b.start['newdate']) return 1;
                    if (a.start['newdate'] < b.start['newdate']) return -1;
                    return 0;
                });
                return events.map(event => {
                    let calendarEvent: CalendarEvent = {
                        title: event.summary,
                        htmlLink: event.htmlLink,
                        start: new Date(event.start.date == undefined ? event.start.dateTime == undefined ? '' : event.start.dateTime : event.start.date),
                        end: new Date(event.end.date == undefined ? event.end.dateTime == undefined ? '' : event.end.dateTime : event.end.date),
                        allDay: false,
                        color: calendar.backgroundColor
                    };
                    return calendarEvent;
                });

            });
        });
        return this.$q.all(requests);
    });
}

Can anyone help me with why this isn't functioning as expected?

file: 'file:///d%3A/Projects/Homepage2/app/google.service.ts' severity: 'Error' message: 'Argument of type '{ calendarId: string; timeMin: string; showDeleted: boolean; singleEvents: boolean; orderBy: stri...' is not assignable to parameter of type 'EventsListParameters'. Types of property 'orderBy' are incompatible. Type 'string' is not assignable to type '"startTime" | "updated" | undefined'.' at: '166,61' source: 'ts'

The 'params' object is defined as follows:

  interface EventsListParameters {
    calendarId: string;
    alwaysIncludeEmail?: boolean;
    iCalUID?: string;
    maxAttendees?: integer;
    maxResults?: integer;
    orderBy?: EventsOrder;
    pageToken?: string;
    privateExtendedProperty?: string;
    q?: string;
    sharedExtendedProperty?: string;
    showDeleted?: boolean;
    showHiddenInvitations?: boolean;
    singleEvents?: boolean;
    syncToken?: SyncToken;
    timeMax?: datetime;
    timeMin?: datetime;
    timeZone?: string;
    updatedMin?: datetime;
  }

And here is how 'EventsOrder' is defined:

  type EventsOrder =
    // Order by the start date/time (ascending). This is only available when querying single events (i.e. the parameter singleEvents is True)
    'startTime' |
    // Order by last modification time (ascending).
    'updated';

Answer №1

Resolution

To correct the issue, modify orderBy: 'startTime' to

orderBy: 'startTime' as 'startTime'

Further Explanation

The value is being interpreted as a string. By using an assertion, it enforces the interpretation as a literal.

  • For more information on type assertion, visit here
  • A helpful trick can be found at this link

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

Cypress - Ensuring selective environment variables are committed to source control

I currently have two different .env files, one named development.json and the other called production.json. These files contain various environment variables structured like this: { "env": { "baseUrl": "test.com", ...

Utilize a personalized useFetch hook in React.js to transmit a POST request and obtain a response

I recently came across a great resource on this website that provided the logic for a useFetch hook. My goal is simple - I want to send a post request and then map the response into a specific type. While this seems like it should be straightforward, I&apo ...

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

For all the C# devs transitioning to TypeScript in VS Code, this question is directed at you. I was captivated by the code completion feature in VS C#. To paint a clearer picture, let's say I'm trying to write: console.log('hello') W ...

Displaying Multiple HighCharts on a single AngularJS page

As a beginner with HighCharts, I am working on adding two Highcharts to the same page that will access the same data source but display different pieces of data for each graph. For example, the categories will remain constant while the series[] will vary. ...

How come the button doesn't get enabled after three seconds even though ng-disabled is being used?

index.html <html ng-app='myApp'> <head> <title>TODO supply a title</title> <script src="js/angular.js" type="text/javascript"></script> <script src="js/using built-in directives. ...

Using AngularJS to prevent HTML injection in input fields

Is there an effective method to prevent HTML injection in input fields? As an example, if I have a search input field: <input id="search" type="text" ng-model="search" placeholder="search..."> I want to ensure that any attempts to input malicious c ...

The application was not functioning properly due to an issue with the getSelectors() function while utilizing @ngrx/entity to

Currently, I am facing an issue with implementing a NgRx store using @ngrx/entity library. Despite Redux Devtools showing my collection loaded by Effect() as entities properly, I am unable to retrieve any data using @ngrx/entity getSelectors. Thus, it seem ...

Angular two - Communication between parent and children components using a shared service

I am currently working on establishing communication between child components, but according to the documentation, I need to utilize services for this purpose. However, I am facing challenges in accessing service information. When I try to assign the retur ...

405 we're sorry, but the POST method is not allowed on this page. This page does

I'm currently working on a small Form using the kit feature Actions. However, I'm facing an issue when trying to submit the form - I keep receiving a "405 POST method not allowed. No actions exist for this page" error message. My code is quite st ...

Generating a collection of objects using arrays of deeply nested objects

I am currently working on generating an array of objects from another array of objects that have nested arrays. The goal is to substitute the nested arrays with the key name followed by a dot. For instance: const data = [ id: 5, name: "Something" ...

When attempting to import css-animator in Angular2/Typescript, a 404 error is displayed, indicating that the

Recently, I delved into the world of Angular2 and decided to experiment with some animations using css-animator package.json "dependencies": { "@angular/common": "2.0.0-rc.3", "@angular/compiler": "2.0.0-rc.3", "@angular/core": "2.0.0-rc.3", ...

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

"What is the appropriate TypeScript type for this specific JSX code - React.ReactElement, React.ReactNode, and React.FunctionComponent all prove to be inadequate in this

Having an issue with assigning a type to my prop SubmissionComponent. This prop is expecting JSX, possibly a button or a more complex structure. For example: const SubmissionComponent = <p>hi</p>; which is then used like this: <Submitter ...

Discover the process of retrieving an element by its ID when dealing with dynamically generated IDs in AngularJS

I am creating a list using the following code snippet: <div ng-repeat="list in fileUploadList"> <div id="{{list}}Upload"></div> </div> Within the controller, I need to retrieve the element by ID, so I am utilizing this line of ...

When accessing the innerHTML and outerHTML properties on an HTMLElement, they may return undefined without triggering

Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...

AngularJs Resource provides the functionality to pass optional parameters through the URL

Currently, I am utilizing this type of resource: var Products = $resource('companies/:companyId/products') However, the issue arises when I attempt to access the products from all companies via the URL companies/products. Instead of receiving the ...

synchronize the exchange of information and events between two components

Just joined this platform and diving into Angular 7 coding, but already facing an issue. I've set up two components along with a service. The data is fetched by the service upon clicking a button in the searchbar component, and I aim to display it i ...

Issues with AngularJS Drop Down Validation Failure

When I submit my AngularJS form, only one of the drop down lists is showing the required validation. The drop down lists have a difference in their source - one uses an object to set the option label and values, while the other uses a standard dimensional ...

Variety of properties determined by a "type" prop, expanding variations based on a value from the interface

I am trying to enhance a type based on a value from the main interface. If the type == multiline, it will have a specific interface, and if the type == icon, it will have a different type. import React, { memo, useCallback, ReactNode } from 'react&apo ...

Enumeration in zod validation

Currently, I am using a schema in zod and have an object. const escortTypeOptions = [ { value: "Nutrition", label: "תזונה" }, { value: "Training", label: "אימונים" }, { value: "Nutrition ...