Why doesn't the typescript compiler always match function signatures correctly, as shown in the examples below:
type Func = (a: string, b: number)=>void
//flagged as expected
const func1: Func = true
//not flagged as expected
const func2: Func = (a,b)=>console.log(a,b)
//flagged as expected
const func3: Func = (a:number,b:string)=>console.log(a,b)
//why is this not flagged as 'b' is a required parameter and not optional?
const func4: Func = (a)=>console.log(a)
In the scenario where your type is Function, JavaScript / TypeScript does not concern itself with the parameter list until they are actually used within the function.
Due to the lack of function overloading in JavaScript, the number of parameters passed when calling a function is disregarded.
For instance,
function sayHello(name) {
console.log(`Hello ${name}`)
}
sayHello("John")
sayHello("David", "Adams")
sayHello("Smith", "David", "Adams")
The above code will not produce an error, but the output will be:
Hello John
Hello David
Hello Smith
While there isn't a direct way to enforce required Function Parameters in JS/TS, there are workarounds available which can be found in this thread.
Personally, I suggest using Objects instead of individual parameters to ensure requirements are met and handle any edge cases that may arise.
Check out this example in TS Playground for reference.
Reference: https://www.typescriptlang.org/docs/handbook/2/functions.html#optional-parameters
Expanding on @ShriHari's response, consider implementing a click handler function.
Here is an example:
interface MyMouseEvent {
x: number
y: number
}
interface Element {
onClick: (event: MyMouseEvent) => void
}
In some cases, your handler may not necessarily need the event object passed to it.
At times, all that matters is whether the function was called or not.
element.onClick = () => console.log('clicked')
Other times, you may require access to the event object.
element.onClick = (e) => console.log('clicked position', e.x, e.y)
Both of these options are completely type safe. There are no variables with incorrect types.
When invoking a function type, all parameters must be provided. However, when implementing a function type, you are not obligated to use all parameters. If they are unnecessary in your function, there is no need to include them. Thus, it is not essential to enforce the presence of all parameters.
The crucial aspect is ensuring that the existing parameters have the correct type.
When setting up a subscription in Angular, I am declaring it as follows: counterSubscription: Subscription However, an error is being thrown stating: Property 'counterSubscription' has no initializer and is not definitely assigned in the const ...
Currently, I am loosely following a tutorial on creating an angular npm package named customlib. This package is intended for managing dependencies across my projects without the need to make them public on npm. The tutorial can be found here. However, I ...
Struggling to get my Sony Z2 smartphone app running. Command used: ionic build android --prod --release Error displayed in console: typescript error Type CirckelmovementPage in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/cir ...
Make sure to wrap useSearchParams() in a suspense boundary on the "/auth-callback" page. For more information, check out https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout import React, { useEffect } from 'react'; import { useRou ...
I've been working on converting some code from JavaScript to TypeScript, and I have a specific requirement for the return type of a function. The function should return void if a callback parameter is provided, otherwise it should return Promise<o ...
Expecting to encounter a compile time error with this code, but it seems my understanding of enums is off... enum SortDirection { ascending = 1, descending = -1 } type IndexSpec = {[index: string]: SortDirection}; var i: IndexSpec = {thing: 3}; ...
We are currently using the msal library and are in the process of converting our javaScript code to TypeScript. In the screenshot below, TypeScript correctly identifies the expected type for cacheLocation, which can be either the string localStorage, the ...
Currently my project is using Angular 10 and I have a specific requirement. In the function below, I need to pass in a filter variable dynamically so that I can extract the startValue property from it. let filter = "AgeRange"; ValidateValues(end ...
*I'm faced with a challenge in my React project where I need to synchronize the movement of a div (switcher-btn) and an Ant Design Drawer. Whenever the Drawer is opened, I want the switcher-btn to move along with it. Below is the code snippet I'v ...
I am attempting to use the axios library in my Next.js app (written in TypeScript) to access a public API for retrieving IP addresses from . In my index.ts file, I have the following code: import axios from "axios"; export const ipApi = axios.cr ...
An issue commonly encountered in TypeScript is error TS2349, indicating that sth has no call signatures. Various situations require different solutions, but when working with React's Context, the most effective solution I've discovered is using ...
I'm clear on what needs to be done: obtain the type definition for Typography.variant. However, I'm a bit uncertain on how to actually get these. interface TextProps { variant?: string component?: string onClick?: (event: React.MouseEvent&l ...
I'm looking to perform a series of modifications on a document using the VSCode API. The key function in this process is Workspace.applyEdit, which gives back a Thennable. This is my first encounter with it, and the one returned from this function doe ...
Can someone assist me with a problem I'm facing while learning NativeScript? I am trying to read a txt file that contains JSON data and then assign it to an Array called countries. However, despite my efforts, I have not been successful. The code sni ...
While my website functions perfectly on the development server, I encounter a strange error when I publish it to production on GitHub pages. Visiting the URL (yanshuf0.github.io/portfolio) displays the page without any issues. However, if I try to access y ...
For a considerable amount of time, I have been using the TypeScript and Vue presets provided below. While it has been functional, I realize that I do not fully comprehend each option and therefore seek to gain a better understanding. Firstly, what sets apa ...
I have already reviewed a similar question titled router.navigate changes the URL, but is not rendering the component but encountered the same issue in my scenario. Within my routes module, I have a route defined as follows: { path: " ...
I am encountering an issue while trying to simultaneously type the props of my component and utilize a URL param. The error message I receive is as follows: Property 'match' does not exist on type 'Readonly<{children?:ReactNode}> ...
export class MapsComponent implements OnInit { @ViewChild('googleMap') gmapElement: any; map: google.maps.Map; data = "initialised"; ngOnInit() { var directionsService = new google.maps.DirectionsService; ...
Currently in my Angular 7 project, I have integrated the Monaco editor for coding purposes. One issue I am facing is that when I make a change to the code and then press ctrl+z to undo it, the previous code is successfully restored. However, if I change th ...