The callback type in TypeScript is used to define the types

Question

The callback type in TypeScript is used to define the types

I have encountered this scenario:

function createCar(name: string, callback: () => void)

function buildEngine(name: string): Engine

function createCarWithEngine(carName: string, engineName: string, callback: (param: Engine) => void) {
  let createdEngine = createdEngines.find((engine) => engine.name === engineName)
  if (!createdEngine) createdEngine = buildEngine(engineName)

  createCar(carName, () => callback(createdEngine)) // encountering an error here
}

While working in VSCode, it indicates that createdEngine might be undefined. However, the following code seems to work without any issues:

  const fn = callback(createdEngine)

  createCar(carname, () => fn)

Can anyone explain if this behavior is expected?

typescript

Answer 1

Answer №1

The two scenarios are not the same.

In the second scenario, you invoke `callback` within the function, while in the first scenario, you postpone the call for a later time.

This will result in the same error.

 const func = () => callback(createdEngine)

 createCar(carname, func)

This issue arises because TypeScript cannot determine what will happen with `createdEngine` since the function is being called at a later time. However, if you ensure that the type of `createdEngine` remains as an `Engine`, then it should work.

function createCarWithEngine(carName: string, engineName: string, callback: (param: Engine) => void) {
  let createdEngine = createdEngines.find((engine) => engine.name === engineName) || buildEngine(engineName)

  createCar(carName, () => callback(createdEngine)) // error occurs here
}

Answer 2

The two scenarios are not the same.

In the second scenario, you invoke `callback` within the function, while in the first scenario, you postpone the call for a later time.

This will result in the same error.

 const func = () => callback(createdEngine)

 createCar(carname, func)

This issue arises because TypeScript cannot determine what will happen with `createdEngine` since the function is being called at a later time. However, if you ensure that the type of `createdEngine` remains as an `Engine`, then it should work.

function createCarWithEngine(carName: string, engineName: string, callback: (param: Engine) => void) {
  let createdEngine = createdEngines.find((engine) => engine.name === engineName) || buildEngine(engineName)

  createCar(carName, () => callback(createdEngine)) // error occurs here
}

The callback type in TypeScript is used to define the types

Answer №1

Similar questions

How to implement ngx-spinner in an Angular http subscribe operation

Angular 6 - Accessing row information by clicking a toggle button

Guide on setting up an Angular 2 project with Typescript using Maven

Utilizing Highcharts with React and Typescript for Event Typing

The 'disabled' property is not found in the 'MatButton' type, however, it is necessary in the 'CanDisable' type

Implementing Class-based Dependency Injection in Express

Encountering a 405 HTTP error in Angular8 app when refreshing the page

Implementing global user authentication state with Zustand in Next.js version 13.4.9

Dealing with 'TypeError X is Not a Function' Error in Angular (TypeScript): Occurrences in Certain Scenarios and Absence in Others

The error message "Type 'IPromise<{}>' is not compatible with type 'IPromise<TemplatesPagingModel>' in typescript version 2.8.0" is displayed

Is it necessary to create a wrapper for Angular Material2 components?

Best practices for annotating component props that can receive either a Component or a string representing an HTML tag

How can I confine a non-UMD module that has been imported in Webpack and Typescript to just one file?

Retrieving and merging data from an API using Angular 6

react-i18next - The function call does not match any overload when the specified type is `string`

Exploring Angular5 Navigation through Routing

io-ts: Defining mandatory and optional keys within an object using a literal union

Encountering a 500 (Internal Server Error) while attempting to fetch a single document from MongoDB without utilizing the

What is the process for performing type checking on an array variable designated as "as const"?

Is it feasible to append an element to the result of a function that returns an array?