Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Question

Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Seeking assistance from experienced individuals in the realm of gulp.js and typescript - could someone provide guidance for a struggling newcomer?

I am currently utilizing the most recent versions of all relevant tools (node, ts-node, gulp, ts, @types/gulp, etc). Gulp is being executed through ts-node, using a gulpfile.ts instead of gulpfile.js, but I am encountering the following error:

error TS2345: Argument of type 'Promise<void>' is not assignable to parameter of type 'Task'.
Type 'Promise<void>' does not match the signature expected by 'TaskFunction'.
The return type ''Promise<void>'' is incompatible with '(done: TaskCallback): void | EventEmitter | ChildProcess | Stream | Observable<any> | PromiseLike<any>'.

The key portions of my code are as follows:

gulp.parallel(
    subTask("directory_1"),
    subTask("directory_2")
);

async function subTask(sDirectory:string){
    await gulp.src("src/"+sDirectory+"/*.*")
        // Perform tasks such as linting, transpiling, uglifying, etc.
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    return;
}

The code functions correctly when the directory strings are hardcoded within subTask (creating separate copies for each directory), however it fails when attempting to pass the directories as parameters.

It appears that the issue lies in returning a void promise from subTask whereas gulp expects a type of Task (a subtype of

TaskFunction</code). Trouble arises when trying to assign a type to <code>subTask

(assigning either Task or TaskFunction results in "Cannot find name 'Task'").

What mistake am I making here? And more importantly, how can I resolve it? Can anyone provide example code to rectify this issue?

Your assistance and guidance would be immensely appreciated. Thank you.

Best regards,

Dulux-Oz

typescript types gulp

Answer 1

Answer №1

Your function has two main issues: firstly, it doesn't return anything; and secondly, it is marked as async. While gulp streams operate in an asynchronous manner, they are not promises, so there is no need to await them. Therefore, the async declaration is unnecessary.

To address this, I recommend updating your function as follows:

function subTask(sDirectory:string) {
    return function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Perform linting, transpiling, uglifying, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

The remaining portion of your code appears to be correct.

Answer 2

Your function has two main issues: firstly, it doesn't return anything; and secondly, it is marked as async. While gulp streams operate in an asynchronous manner, they are not promises, so there is no need to await them. Therefore, the async declaration is unnecessary.

To address this, I recommend updating your function as follows:

function subTask(sDirectory:string) {
    return function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Perform linting, transpiling, uglifying, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

The remaining portion of your code appears to be correct.

Answer 3

Answer №2

After receiving advice from @goto-0, I found that their answer was 99% accurate (big thanks to @goto-0). However, following the suggested refactor, I encountered an error stating

Did you forget to signal async completion?

.

The complete solution required making the sub-function inside subTask an asynchronous function:

function subTask(sDirectory:string) {
    return async function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Further processing like linting, transpiling, uglifying, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

All is well now :-)

Answer 4

After receiving advice from @goto-0, I found that their answer was 99% accurate (big thanks to @goto-0). However, following the suggested refactor, I encountered an error stating

Did you forget to signal async completion?

.

The complete solution required making the sub-function inside subTask an asynchronous function:

function subTask(sDirectory:string) {
    return async function() {
        return gulp.src("src/"+sDirectory+"/*.*")
        // Further processing like linting, transpiling, uglifying, etc
        .pipe(gulp.dest("dest/"+sDirectory+"/"));
    };
}

All is well now :-)

Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Answer №1

Answer №2

Similar questions

Switching between various components based on conditions within the same route in Angular

The JokesService (?) has encountered dependency resolution issues that Nest is unable to resolve

What is the method for returning a string array?

The pre-line white-space property is not functioning as anticipated in my CSS code

Leveraging IF conditions on part of the worksheet title

The method of pausing a function until the result of another function is returned

Dealing with precompile array warning when utilizing a basic router in Angular 2

Tips for properly handling a property that receives its value from a callback function and waiting for it to be updated

Using Angular, a function can be called recursively directly from within the HTML

Troubleshooting: Vue.js component events not being detected in TypeScript

How about: "Loop through an array of objects fetched from an observable and initiate an HTTP request for each object's ID?"

A guide on renewing authentication tokens in the Nestjs framework

The property 'x' cannot be found on the data type 'true | Point'

Incorporate service providers into models with Ionic3/Angular4

Dealing with the "this" problem in TypeScript and its impact on scope

What is the best way to implement a scroll event in a React application?

Using typescript, we can pass a generic class as a parameter to a function

What is the best way to prevent the hassle of manually reloading a VS Code extension each time I make updates

Implement the properties encapsulation design pattern

Contact the help desk and receive information that is currently unknown