The function type declaration is missing the expected '=>'

In my interface, I define the structure of a callback as shown below:

interface SliderOptions {
    onCreateSlide?: (slide: Slide) => void;
    onSlideTransition?: (slide: Slide, offset: number, onTransitionComplete: () => void); // This line results in a TypeScript compiler error.
    // more options etc
}

However, I am encountering an error, which is illustrated in the image linked below:

https://i.sstatic.net/jtowA.png

I'm puzzled by why this error is occurring, considering that the previous line, which is similar in nature, does not produce any errors in my opinion.

typescripttypescallback

Answer №1

You possess two void-returning functions, namely onSlideTransition and onTransitionComplete. To align them correctly, you can write: 

onSlideTransition?: (slide: Slide, offset: number, onTransitionComplete: () => void)=> void;

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

What is the optimal data type in C# for achieving precision up to 3 decimal places?

What is the best data type to use for storing a number with the following format: 0.000? Would a double be suitable for this purpose? Seems like an INT is not an option, right? ...

c#.nettypesprecision

Function in Typescript that accepts either a single object or an array of objects

We frequently use a simple function declaration where the function can accept either a single object or an array of objects of a certain type. The basic declaration looks like this: interface ISomeInterface { name: string; } class SomeClass { pu ...

javascripttypescript

Ionic causing delay in updating ngModel value in Angular 2

My ion-searchbar is set up like this: <ion-searchbar [(ngModel)]="searchQuery" (keyup.enter)="search();"></ion-searchbar> In the typescript file, the searchQuery variable is defined as follows: export class SearchPage { searchQuery: string ...

angularjstypescriptangularionic2

Issue: The observer's callback function is not being triggered when utilizing the rxjs interval

Here is a method that I am using: export class PeriodicData { public checkForSthPeriodically(): Subscription { return Observable.interval(10000) .subscribe(() => { console.log('I AM CHECKING'); this.getData(); }); } ...

javascriptangulartypescriptrxjs

Leveraging the left-hand side operator while invoking functions within Angular 2 templates

I've encountered a puzzling situation with the function in my component : public limit: number = 3 public logLimit(limit) { console.log(limit) } and in my template : <div (click)="logLimit(--limit)">Decrease and log limit</div> Stra ...

angulartypescript

Visibility of Input-properties in Angular 2

I am encountering an issue where a component parent is calling another component child with an input-property. Although the property is available in the child's template, it does not seem to be accessible within the constructor or OnInit functions. I ...

angulartypescript

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

While working on my project and using react-color as a dependency, I encountered an issue with the tsc import failing. The error message displayed: node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts(2,41): error TS2307: Cannot find module & ...

reactjstypescripttypescript-typings

Discover which references are yet to be resolved within a tsx file

I have been tasked with developing a custom builder for a web application. The challenge now is to automatically detect imports in the code so that the right modules can be imported. My current solution involves traversing the AST of the scripts, keeping ...

typescriptabstract-syntax-treetsxtypescript-compiler-api

Upgrading from Angular 5 to Angular 6: The Journey of Migration

I have been following an Angular migration tutorial to upgrade from Angular 5 to 6. https://update.angular.io/ Upon completing the migration process and attempting to run the application using ng serve, I encountered an error. The format of the Angula ...

typescriptmigrationangular5angular-cliangular6

React's useState function causes the entire application to crash

Currently, I am working on setting up a basic menu using ASP.net core 2.1, Typescript 3.2.1, material-ui 3.8.3, and React 16.7.0. However, upon running the application, it crashes at the line containing useState showing the error message as TypeError: reac ...

asp.netreactjstypescriptmaterial-uireact-hooks

Typescript encounters Duplicate error when method overloading is implemented

Below is the code snippet that I am working with: public async insert(data: iFlower | iFlower[]): Promise<iFlower> | Promise<iFlower[]> { await this.insert(data); } private async insert(data: iFlower): Promise<iFlower>{ .... return d ...

typescriptoverloading

How to leverage tsconfig paths in Angular libraries?

While developing an Angular library, I made configurations in the tsconfig.lib.json file by adding the following setup for paths: "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", "declaration": true, "inlineSources ...

javascriptangulartypescript

Strategies for resolving the TypeScript 'possibly null' issue in ternary situations

Looking to enhance my code with a ternary operator for adding a class: className={clsx(classes.text, { classes.textSmall]: children.length > 11, })} Although this approach works, a TypeScript error is triggered: Object is possibly 'null' ...

reactjstypescript

Issue with FormControlLabel not properly implementing disableCloseOnSelect in Material UI v5 Autocomplete

I'm currently working on developing a wrapper for the MUI Autocomplete component. If you want to see my progress, feel free to check out my codesandbox link: here To keep things simple for demonstration purposes, I've significantly simplified t ...

reactjstypescriptmaterial-ui

Transform text hue using regular expressions in TypeScript/React

Why isn't my class being used in my regex function? I'm quite confused about what's going on. Regex let headingTitle: Element | null = document.querySelectorAll("h2") headingTitle.innerHTML = headingTitle.textContent?.repla ...

javascriptreactjstypescript

jester: constantly jest navigator's mock & check against userAgent/vendor

Purpose: Need to iterate through different combinations of the userAgent Simulate navigator behavior Execute the test Observation: I simulated the navigator.userAgent, simulation works as planned, first test executes as expected Second simulation is per ...

typescriptunit-testingjestjsmockingnavigator

The pagination in React using React Query will only trigger a re-render when the window is in

Currently, I am utilizing React-Query with React and have encountered an issue with pagination. The component only renders when the window gains focus. This behavior is demonstrated in the video link below, https://i.sstatic.net/hIkFp.gif The video showc ...

javascriptreactjstypescriptpaginationreact-query

The functionality of absolute import seems to be malfunctioning in React Vite js

Issue with vite config not importing from src folder error message: Failed to resolve import "redux/1space/letter/inboxSlice" from "src/pages/letter/index.jsx". Is the file present? / import { loadInboxs } from "redux/1space/lette ...

javascriptreactjstypescriptvite

What could be the reason for the absence of a TypeScript error in this situation?

Why is it that the code below (inside an arbitrary Class) does not show a TypeScript error in VSCode as expected? protected someMethod (someArg?: boolean) { this.doSomething(someArg) } protected doSomething (mustBePassedBoolean: boolean) { /* ... * ...

javascripttypescriptvisual-studio-code

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

javahtmlangulartypescript