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.
Currently, I am using a regular observable instead of an observableArray. This observable keeps an array of elements which is defined as follows: public arrayOfItems: IArrayItem[]; public arrayOfItems$: BehaviorSubject<IArrayItem[]> = new BehaviorSu ...
I am curious about the proper syntax for removing multiple entries using the SREM command. When I try this: const myKey = "myKey"; const entriesToRemove: string[] = ... this.redisClient.srem(myKey, entriesToRemove); I end up with: ReplyError: ...
I have developed a component named CopySchedulefromSiteComponent and now I am looking to import it into another component called SiteScheduleComponent. However, I am unsure of the correct way to do this. The CopySchedulefromSiteComponent contains one fiel ...
I'm facing an issue where I installed the 'web-request' module but unable to get it working properly. Here is my code: npm install web-request After installation, I imported and used it in my class: import * as WebRequest from 'web-r ...
Need assistance with implementing this code using styled components or CSS for transitions. The code from style.css: .slide { opacity: 0; transition-duration: 1s ease; } .slide.active { opacity: 1; transition-duration: 1s; transform: scale(1.08 ...
Having difficulty organizing a chain of calls using TypeScript with RxJS observables I am new to RXJS and I am struggling to structure a chain of calls in my TypeScript code. My question is - how can I ensure that this.http.get(''); is only cal ...
When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...
Looking to integrate a session feature into my Angular 5 application. I aim to create a single TypeScript file that will handle user login validation. Is there a way to trigger this file every time the page reloads or the URL changes? Need guidance on im ...
I am currently working with AngularJS and Typescript. I have encountered an issue while trying to access the form object. Here is the HTML snippet: <form name="myForm" novalidate> <label>First Name</label> <input type="text" ...
I am working with a specific type that looks like this: type Props = { type: 'foo'; value: string; } | { type: 'baz'; value: number; }; However, when using a switch statement with the type property in TypeScript, the program in ...
The goal is to determine the type of a wrapper based on the wrapped function, meaning to infer the return type from the parameter type. I encountered difficulties trying to achieve this using infer: function wrap<T extends ((...args: any[]) => any) ...
export function executeCommandPromise(file: string, command: string) { return new Promise((resolve, reject) => { exec(command, { cwd: `${file}` }, (error: ExecException | null, stdout: string, stderr: string) => { if (error) { con ...
Please note that this is a question seeking clarification Instructions Needed I am currently working on dispatching an action to NgRx in order to add a task to a list of tasks. Additionally, I need to perform a put request to an API to save the changes ma ...
I've been exploring the concept of generating migration files for models that already exist. When I use the "force: true" mode, tables are automatically created in the database, so I find it hard to believe that creating migration files automatically ...
In my front-end development, I am working on creating a store() function that adds a new question to the database. However, I need to include the active user's ID in the question data before sending it to the back-end. Below is the code for the store ...
I'm trying to attach a file to an event like this: event.target.files[0]=newFile; The error I'm getting is "Failed to set an indexed property on 'FileList': Index property setter is not supported." Is there an alternative solution fo ...
Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...
I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...
I am facing an issue in finding the appropriate type for the onClick event that will help me retrieve the id of the clicked div. const getColor = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const color = event.target.id; // ...
Seeking clarity on a fundamental TypeScript concept here. I've noticed that Google Cloud examples use JavaScript, and I'm in the process of converting one to TypeScript. Source: https://cloud.google.com/storage/docs/listing-buckets#storage-list ...