My code includes the following type definition:
type FuncWithRequiredParams = (a: number, b: number, c:string) => void
const func1: FuncWithRequiredParams = (a: number, b: number, c: string) => {} // This is functional
const func2: FuncWithRequiredParams = (a: number, b: number, c: string, d: boolean) => {} // Results in an error
const func3: FuncWithRequiredParams = (a: number, b: number) => {} // While this works, I want it to fail
Any suggestions on how to workaround this issue?
To start off, it's important to clarify that this behavior is indeed correct. Consider the following code snippet:
type FuncWithRequiredParams = (a: number, b: number, c: string) => void;
const func3: FuncWithRequiredParams = (a: number, b: number) => {};
The interaction between you and the compiler can be visualized as follows:
TSC: I need a function that requires three arguments.
You: Here's a function with only two parameters.
TSC: That's alright, I'll use it with three arguments and simply ignore the third one. It still meets my requirement.
As noted by caTS, this is typically the desired behavior. If a parameter is not utilized within a function, there may not be a need to explicitly define it in the type declaration.
If you have a specific reason for wanting this setup (perhaps there's a compulsory callback that every implementing function must invoke), the focus might shift towards prompting implementers about inadvertent oversights.
One approach that could address your concerns involves making the relevant functions generic, allowing the compiler to infer the exact callback type being passed in and ensuring precise matching against the expected type:
type FuncWithRequiredParams = (a: number, b: number, c: string) => void;
const func1 = (a: number, b: number, c: string) => {};
const func2 = (a: number, b: number, c: string, d: boolean) => {};
const func3 = (a: number, b: number) => {};
type Identical<A, B> = A extends B ? (B extends A ? A : never) : never;
function registerPlugin<T>(f: Identical<T, FuncWithRequiredParams>) {
// ...
}
registerPlugin(func1); // valid
registerPlugin(func2); // invalid
registerPlugin(func3); // invalid
It's worth noting that while this approach provides some level of assurance, it is not foolproof (primarily because the original behavior is technically sound).
For instance, explicitly specifying the type parameter will bypass compiler warnings:
registerPlugin<FuncWithRequiredParams>(func3); // valid
Similarly, if you manually set the type of func3 as demonstrated in your initial code snippet:
const func3: FuncWithRequiredParams = (a: number, b: number) => {};
registerPlugin(func3); // valid
The compilation process will proceed without errors in these scenarios.
While developing my React application, I encountered a problem with the CSS styling of the Select component from Material UI. Specifically, when I attempt to remove padding from the Select component, the padding is successfully removed. However, upon refre ...
Currently, I am working on a test to verify the amount of gold in my possession. The test is being conducted using TypeScript and Protractor. Within this testing scenario, I have a method named GetAmountOfChips: public static GetAmountOfChips(): PromiseL ...
Curious about the meaning of peerDependencies, I examined the contents of this package.json file. It relates to a library project that is distributed elsewhere. { "name": "...", "version": "...", "description": "...", "author": "...", ...
When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...
My creativity has hit a roadblock and I'm looking for some help. I decided to use the Reactive Forms Module in Angular, so I imported it into my app.module.ts as shown below: import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ ...
In my development workflow, I have established an Angular Component Library that I deploy using NPM (via Nexus) to various similar projects. This library includes a PageComponent, which contains a FooterComponent and a NavbarComponent. Within the NavbarCom ...
When using v-model to show checked or unchecked checkboxes, the following code is being utilized: <template v-for="(item, index) in myFields"> <v-checkbox v-model="myArray[item.code]" :label="item.name" ...
Hello, fellow developers! I am relatively new to Ionic and web programming in general. Currently, I am working on a small app that involves integrating the Google Maps JS API. While I have successfully created and loaded the map, as well as added a custom ...
Is it possible to pass a variable directly to the styled function in order to conditionally change style properties while using MUI styled function? I want to achieve something like this: borderColor: darkMode ? 'white' : 'black' const ...
Recently, I've been working on developing custom functions for my Angular application. Following the official guidelines, I have created an independent library. My goal is to create chainable functions similar to this: var obj = { test : function( ...
Whenever I attempt to execute the application, an error is consistently displayed to me. Here is a screenshot of the error: https://i.sstatic.net/jfo3X.png This issue always arises on the initial import type line, regardless of the content or arrangement ...
Can you explain why the stopsDict["first"].directions.push("test"); line is successful, but not the stopsDict[stopName].directions.push("test"); one? interface StopsDict { [key: string]: Stops; } interface Stops { directions?: string[]; } let stop ...
My job involves working with Sequalize models, which are essentially classes. Upon registration, these models are populated with some data that needs to be stored. To accomplish this, I store them in a list. However, when retrieving a model into a variab ...
I am currently developing a sophisticated web application using Angular and TypeScript, and I have decided to incorporate accordions in some sections. The setup for these accordions involves TypeScript/Bootstrap as shown below: <accordion> <acco ...
Currently, I'm facing a typescript issue after upgrading to React Navigation 5. The specific error message reads: There is an issue with calling this expression. The union type '{ <RouteName extends "Stack1Screen1" | "Home&quo ...
I am currently working on implementing a function called sumPluck. This function will allow the user to specify a property of type number from an object in an array, and then calculate the sum of all those properties. For example: type A = { prop: number ...
Currently, I have a form field whose value I am passing to a service as this.form.value. However, when I log this.form.value on the console, I see Object { email: "zxzx", password: "zxzxx" }. Despite this, when I send the same data to the service and make ...
In my Typescript projects, I frequently use an npm module called common-types (repository: https://github.com/lifegadget/common-types). Recently, I added an enum for managing Firebase projects named FirebaseEvent. Here is how it is defined: export enum Fi ...
As a newcomer to Angular, I've been working on this code for hours now. Hopefully, it will all come together for someone out there who can make sense of it. export class QuizComponent implements OnInit { originalArray: IArray[] = []; tempArray: I ...
Recently, I've been trying to add some animation to a simple React Component using the GreenSock ScrollTrigger plugin. However, I ran into an issue due to types mismatch in my Typescript project. Here's a snippet of the code: import React, {useRe ...