Indicate the desired return data type directly without using a middleman variable

Question

Indicate the desired return data type directly without using a middleman variable

Occasionally, TypeScript struggles to infer the return type of a lambda or method, prompting me to manually specify it for enhanced type safety.

This issue arises when dealing with promises or more complex callbacks (such as those used in the parsimmon parsing library).

I have yet to discover a method of specifying the return variable's type without resorting to creating a local variable:

interface ITest {
    x: number;
    y: string;
}

// This passes type checking, but I'd prefer it didn't
function f1() {
    return {x:5} as ITest;
}

// This also type checks, though not ideal
// (I understand it's a cast, but included to demonstrate its ineffectiveness)
function f2() {
    return <ITest>{x:5};
}

// Correctly fails to type-check
function f3() {
    const x: ITest = {x:5};
    return x;
}

Is there an alternative approach to achieving type checks without necessitating the creation of a local variable? I acknowledge that I could simply type function f4(): ITest, but my scenarios tend to be more complex:

return P.string(" for ")
    .then(P.takeWhile(c => c !== ' ').skip(P.string(" in ")))
    .chain(value => P.takeWhile(c => c !== ' ')
           .chain(array => parseNgOptionsTrackBy().atMost(1)
                  .map(trackBy => {
                      // Solely created variable for type-checking
                      const r: NgOptionsData = {
                          select: expressions.select,
                          label: expressions.label,
                          value: value,
                          array: array,
                          trackexpr: trackBy ? trackBy[0] : undefined
                      };
                      return r;
                  })));

or:

return new Promise((resolve, reject) => {
    // Some code executed, then variable solely for type-checking
    const result: ViewInfo = {
        fileName: fileName,
        ngModuleName: ngModuleName,
        controllerName: controllerName,
        controllerViewInfos: viewInfos};
    resolve(result);
});

In essence, when deeply embedded within a lambda, defining a return type is not always straightforward.

UPDATE There seems to be doubt surrounding TypeScript's ability to infer resolve for promises. Fortunately, my app is open-source. I have made a commit illustrating the issue on a specific branch: https://github.com/emmanueltouzery/ng-typeview/tree/so_question

Please review the latest commit on that branch. Even after removing a field from the structure being filled (intentionally seeking a build error), the project compiles without issues. And yes, I did indicate the expected return type of the function,

Promise<ControllerScopeInfo>

. This poses a type-safety concern. Should you wish to compile, execute npm install followed by tsc. Though presumably, inspecting the source and the tsconfig may suffice for you to trust my assertion regarding the compilation status.

typescript

Answer 1

Answer №1

Thank you for your request

In the example provided above:

    function x() /*: Promise<{}>*/ {
        // defined as Promise<{}>    
        return new Promise((resolve, reject) => {                
            // ViewInfo can be assigned to {} 
            resolve(
                <ViewInfo>  {
                fileName: fileName,
                ngModuleName: ngModuleName,
                controllerName: controllerName,
                controllerViewInfos: viewInfos}
            );
        })
    };

The resulting function is

()=> Promise<{}>

because of:

Promise is Generic and requires T to be defined in the constructor,
or defaults to Promise<{}>
resolving ViewInfo is also valid according to Typescript structural subtyping,
it can be assigned to {}

this could clarify why the code example functions as intended

Answer 2

Thank you for your request

In the example provided above:

    function x() /*: Promise<{}>*/ {
        // defined as Promise<{}>    
        return new Promise((resolve, reject) => {                
            // ViewInfo can be assigned to {} 
            resolve(
                <ViewInfo>  {
                fileName: fileName,
                ngModuleName: ngModuleName,
                controllerName: controllerName,
                controllerViewInfos: viewInfos}
            );
        })
    };

The resulting function is

()=> Promise<{}>

because of:

Promise is Generic and requires T to be defined in the constructor,
or defaults to Promise<{}>
resolving ViewInfo is also valid according to Typescript structural subtyping,
it can be assigned to {}

this could clarify why the code example functions as intended

Answer 3

Answer №2

Are you referring to:

return new Promise((resolve, reject) => {
    resolve({
        fileName: fileName,
        ngModuleName: ngModuleName,
        controllerName: controllerName,
        controllerViewInfos: viewInfos
    } as ViewInfo);
});

Update

This situation is unusual and could potentially be a bug if you introduce an optional property like this:

interface ViewInfo {
    fileName: string;
    ngModuleName: string;
    controllerName: string;
    controllerViewInfos: ViewInfo[];
    dummy?: any;
}

Then proceed with:

return Promise.resolve({
    fileName: "fileName 2",
    ngModuleName: "ngModuleName 2",
    controllerName: "controllerName 2",
    dummy: 3
});

An error will occur:

Type 'Promise<{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }>' is not assignable to type 'Promise'.

Type '{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }' is not assignable to type 'ViewInfo'.

Property 'controllerViewInfos' is missing in type '{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }'.

This may be intentional, but the rationale is unclear at the moment. If you encounter this issue, consider submitting a report and sharing the link.

In the interim, consider creating factory functions for the desired return types:

function viewInfoFactory(fileName: string, ngModuleName: string, controllerName: string, controllerViewInfos: ViewInfo[]): ViewInfo {
    return {
        fileName,
        ngModuleName,
        controllerName,
        controllerViewInfos
    }
}

Using this function can enhance type safety and improve code readability based on your requirements.

Answer 4

Are you referring to:

return new Promise((resolve, reject) => {
    resolve({
        fileName: fileName,
        ngModuleName: ngModuleName,
        controllerName: controllerName,
        controllerViewInfos: viewInfos
    } as ViewInfo);
});

Update

This situation is unusual and could potentially be a bug if you introduce an optional property like this:

interface ViewInfo {
    fileName: string;
    ngModuleName: string;
    controllerName: string;
    controllerViewInfos: ViewInfo[];
    dummy?: any;
}

Then proceed with:

return Promise.resolve({
    fileName: "fileName 2",
    ngModuleName: "ngModuleName 2",
    controllerName: "controllerName 2",
    dummy: 3
});

An error will occur:

Type 'Promise<{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }>' is not assignable to type 'Promise'.

Type '{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }' is not assignable to type 'ViewInfo'.

Property 'controllerViewInfos' is missing in type '{ fileName: string; ngModuleName: string; controllerName: string; dummy: number; }'.

This may be intentional, but the rationale is unclear at the moment. If you encounter this issue, consider submitting a report and sharing the link.

In the interim, consider creating factory functions for the desired return types:

function viewInfoFactory(fileName: string, ngModuleName: string, controllerName: string, controllerViewInfos: ViewInfo[]): ViewInfo {
    return {
        fileName,
        ngModuleName,
        controllerName,
        controllerViewInfos
    }
}

Using this function can enhance type safety and improve code readability based on your requirements.

Answer 5

Answer №3

To specify the return type of a promise, you can use Promise<string>

function createStringPromise(): Promise<string> {
    return new Promise((resolve, reject) => {
        resolve("string");
    })
}

Alternatively,

return <Promise<string>> new Promise((resolve, reject) => resolve("string"));

or

return new Promise((resolve, reject) => resolve("string")) as Promise<string>;

Answer 6

To specify the return type of a promise, you can use Promise<string>

function createStringPromise(): Promise<string> {
    return new Promise((resolve, reject) => {
        resolve("string");
    })
}

Alternatively,

return <Promise<string>> new Promise((resolve, reject) => resolve("string"));

or

return new Promise((resolve, reject) => resolve("string")) as Promise<string>;

Indicate the desired return data type directly without using a middleman variable

Answer №1

Answer №2

Update

Answer №3

Similar questions

The issue at hand is that the Mongo Atlas model is in place, but for some reason,

Can one bring in a JavaScript function using webpack?

Error: Incorrect data type found in React Route component

Angular provides a variety of functionality to control the behavior of elements in your application, including the

Generics in Typescript implemented for a React component that accepts an array of records along with an array of

A step-by-step guide on retrieving the present date and time using TypeScript

Limit the keys in TypeScript to only the elements of an array

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Is it possible in Typescript to assign a type to a variable using a constant declaration?

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Error message for react-native useRoute hook: Property '.....' is not found within the object type

Discovering new bugs in VSCode Playwright Tests but failing to see any progress

Tips on sorting through an array using Angular 11 and data

Why am I encountering this rendering issue when passing data to the ReactTable component?

Creating a Node.js asynchronous setup function

The concept of type literals in Typescript provides a powerful tool for achieving function

Error: 'ngForOf' is not recognized as a valid property of the 'tr' element

Learn the process of importing different types from a `.ts` file into a `.d.ts` file

Is my approach to CSV parsing correct if I am receiving the error "Unable to assign property 'processing' to undefined"?

"Implementing an Angular material date range picker that requires both the start and end dates to be selected in conjunction with a form control