Why does a void function get passed as a plain object in TypeScript?

Why does a void function pass as a plain object? Is this intentional or a mistake in the system?

playground

type PlainObject = { [key: string]: any };

const foo = (value: PlainObject) => { }

const voidFn: () => void = () => { };

// Error as expected
foo(false);
foo(3);
foo('test');

foo ({ test: true }) // ok - expected usage

foo(voidFn); // Why is there no error here?

This issue only arises when the value is any. If it were, say, { [key: string]: string };, an error would be triggered.

Answer №1

Objects are functions in disguise.

const f = () => null;
const o = {};

console.log(f instanceof Function);
console.log(o instanceof Function);

Even though functions and objects have different properties, they still share the commonality of being able to hold values within their properties.

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

'map' is not defined in the current Typescript scope

As a newcomer to AngularJS, I am encountering an error when attempting to send a post request to my localhost server. The error message states [ts] cannot find name 'map' and cannot find name 'subscribe'. Any assistance in understanding ...

selecting a div element with a label using the nth-child property

I recently discovered the CSS3 :nth-child() Selector and decided to create a sample Here is the HTML snippet: <body> <div> <label>dsdf</label></div> <div>seconddiv</div> </body> And here's the CSS par ...

Obtain JavaScript object from WebView in Swift

Currently, I am displaying a webView in my iOS app using Swift. My goal is to retrieve an object from the JavaScript code within the webView. Upon inspecting the console, I discovered that the desired object is named "window.user". However, when attempti ...

The issue of Angular 9 not recognizing methods within Materialize CSS modals

I am currently working on an Angular 9 application and have integrated the materialize-css 1.0 library to incorporate a modal within my project. Everything works smoothly in terms of opening and instantiating the modal. However, I have encountered an issue ...

Troubleshooting the Three.js installation and modules on a local server issue

Seeking assistance from experienced individuals on this platform for my three.js issue. The current problem I am facing is the inability to run the three.js library properly on my localhost, resulting in a white screen. Here are my files: My JavaScript c ...

What is the procedure for renaming an item within a basic array in Angular?

I am working on a project in Angular and have constructed an array. I am now looking to change the name of one of the items in this array. While I have figured out how to rename keys in an array, I'm still unsure about how to do so for its values. ...

Adding innerHTML content to tooltip title using typescript in an Angular project

I have encountered an issue while trying to display HTML content inside a tooltip element's title attribute. The HTML content is not rendering as expected and appears as text instead. Let me outline the structure of my Angular project: library.comp. ...

Ways to terminate a NOHUP process for Node.js started through SSH

I have initiated a node.js server on port 3000 using nohup for background running, but now I need to stop the server on the same port and start it again. How can I stop the process? To identify the process in order to kill it, I can use this command: ps ...

Having trouble updating the DataTable with extra details retrieved from a new URL

I'm currently utilizing the DataTable plugin. After loading the DataTable, my aim is to reload the table, while keeping the existing content intact, and adding information gathered from a separate json file. However, I'm encountering an issue wh ...

Dependencies in AngularJS factories

I'm currently using AngularJS to extract data from mongodb. I have been attempting to utilize a factory to retrieve this information through the $http method. Despite researching and trying numerous approaches, none seem to work for me. In addition t ...

Leveraging Javascript Modules within a Typescript Vue Application

The issue at hand I've encountered a problem while attempting to integrate https://github.com/moonwave99/fretboard.js into my Vue project. My initial approach involved importing the module into a component as shown below: <template> <div&g ...

Angular code causing an unexpected blank page to be printed again

Trying to display the content of my HTML page is proving to be a challenge. I've been utilizing angularPrint, but an issue persists in the form of a second blank page appearing in the preview alongside the actual content. Eliminating this unwanted sec ...

AngularJS dynamically creates an HTML template that includes an `ng-click` attribute calling a function with an argument

Struggling to create an HTML template using an AngularJS directive, the issue arises when trying to pass an object into a function within one of the generated elements. Here is the directive code in question: app.directive('listObject', function ...

What causes the "This expression is not callable..." errors to occur in TypeScript and React JS?

As a newcomer to typescript, I am unsure why I am encountering this error while working with my data list array: const { data: CUData = { cu: [] as Array<CuType> }, } = useGetCUQuery(); let CUDataArray = CUData && CUData.cu ? CUDat ...

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

Determine the dimensions of a div element in IE after adjusting its height to auto

I am currently working on a JavaScript function that modifies the size of certain content. In order to accomplish this, I need to obtain the height of a specific div element within my content structure. Below is an example of the HTML code I am dealing wit ...

Update ngModel value following the PUT request response

I currently have a variable named dummy_value and I would like to update it using an input box. <p>{{dummy_value}}</p> <input [(ngModel)]="dummy_value" /> Upon making this change, the dummy_value updates instantly due to the two-way bin ...

I am in need of creating a specialized Gulp task that can effectively strip out attributes from my HTML code

I am in need of a Gulp task that can iterate through all specified HTML documents and eliminate specific attributes (such as style=""). I initially attempted to accomplish this task the same way I would do it via the browser, but it seems that's not p ...

Reactjs: Prop Type Error - Issue with retrieving the values from props during data submission

Currently, I am developing a social app where users can post screams, like posts, and add comments. The issue I'm encountering is that I am not receiving the props value when posting a new scream initially, but after refreshing the page, everything wo ...

Preventing the display of any object items that include a period character in AngularJS

There seems to be an issue with a JSON item not displaying correctly in AngularJS. error = { "name": [ "The name field is required." ], "salary.salary_id": [ "The salary.salary id field is required." ] } When attempting to ...