Snippet:
class A {
x: number;
}
class B extends A {
y: number;
}
var f1: { (y: A): void } | { (y: B): void };
f1 = (y)=>{} // y :any
var f2: { (x: number): (y: A) => void } | { (x: number): (y: B) => void };
f2 = ((x) => { return (y)=>{}; }); //y :A
Curious about why the type of the y parameter is any when contextually typed by f1, but A when typed by f2 in arrow functions?
When a contextual type consists of a combination of potential signatures, all those signatures must be exactly the same, including the parameter types.
The reason for this requirement is the potential ambiguity in determining your intended meaning. It could be interpreted as "combine the parameters of all possible signatures that match the function's criteria," but that process has not been implemented yet.
For further clarification, here is the corresponding section from our source code:
function getContextualSignature(node: FunctionExpression | ArrowFunction | MethodDeclaration): Signature {
Debug.assert(node.kind !== SyntaxKind.MethodDeclaration || isObjectLiteralMethod(node));
const type = getContextualTypeForFunctionLikeDeclaration(node);
if (!type) {
return undefined;
}
if (!(type.flags & TypeFlags.Union)) {
return getNonGenericSignature(type, node);
}
let signatureList: Signature[];
const types = (<UnionType>type).types;
for (const current of types) {
const signature = getNonGenericSignature(current, node);
if (signature) {
if (!signatureList) {
// This signature will contribute to contextual union signature
signatureList = [signature];
}
else if (!compareSignaturesIdentical(signatureList[0], signature, /*partialMatch*/ false, /*ignoreThisTypes*/ true, /*ignoreReturnTypes*/ true, compareTypesIdentical)) {
// Signatures aren't identical, do not use
return undefined;
}
else {
// Use this signature for contextual union signature
signatureList.push(signature);
}
}
}
Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example: human.ts (my class file) export class Human { private numOfLegs: Number; constructor() { this.numOfLegs = 2 ...
I've created a class that can take JSON objects and transform them into the desired class. Here's the code: import {plainToClass} from "class-transformer"; import UserDto from "../../auth/dto/user.dto"; class JsonConverter { ...
I am looking to create a function that accepts actual class objects themselves as arguments (within an object containing multiple arguments), with the return type of the function being inferred to be an instance of the class provided as the argument. In t ...
Ever since integrating the FullCalendar library into my Vue project, I've been encountering an error every time I try to use my custom component in a Vue template. My setup includes Vue 3, Vite, VSCode, eslint, and prettier. This issue seems to be m ...
I have created an interface type as follows: interface Input<TOutput> { } And then extended that interface with the following: interface ExampleInput extends Input<ExampleOutput> { } interface ExampleOutput { } Additionally, I ha ...
I am currently developing a React application using webpack and typescript. I have integrated the dependency react-financial-charts into my project, and it is properly specified in the package.json. Inside the node_modules directory, there are two folders ...
When developing and releasing a library using TypeScript, there are 2 approaches: One option is to generate declaration files d.ts along with the bundled JavaScript file and then specify it in package.json with: "types": "./dist/mylib.d.ts" Alternativel ...
Is there a way to have the select field start with an empty value instead of the default dollar sign? The demonstration can be found at https://codesandbox.io/s/material-demo-forked-xlcji. Your assistance in achieving this customization would be greatly a ...
npm ERROR! encountered code EACCES during installation npm ERROR! while trying to create a directory npm ERROR! at path /usr/local/lib/node_modules/typescript npm ERROR! with error number -13 npm ERROR! Error: EACCES: permission denied, mkdir '/usr/lo ...
Within the constructor of a component, I am declaring a private variable for an imported component. For example: constructor(private x: Xcomponent){} Afterwards, I am calling a function, scanx(), that is declared inside Xcomponent. x.scanx() Within the ...
I'm facing an issue related to Typescript type checking while working with functions. Let's assume I have a Type called IBaseField and a variable of Type Array<IBaseField>. When trying to assign a value to this variable, I consistently chec ...
const checkRegexSignUp = { firstName: { inputWarning: "only letters", inputRegex: /^[a-z ,.'-]+$/i }, lastName: { inputWarning: "only letters", inputRegex: /^[a-z ,.'-]+$/i }, } const change = (e: ChangeEvent<HT ...
After creating an Angularjs provider in typescript, I found myself wondering if there might be a more efficient way to achieve the same outcome. My current provider serves as an abstraction for a console logger, with the interface primarily designed to s ...
My Chrome extension is functioning properly when using JavaScript alone. However, when attempting to incorporate TypeScript with Webpack, I encountered an issue where the function foo could not be found. Uncaught ReferenceError: foo is not defined Here ...
I am currently facing an issue with implementing Playwright in my project. It seems that Playwright is struggling to a) resolve path aliases and b) it is unable to locate certain npm packages that have been installed. Here is the structure of my project: ...
I was attempting to inject a service (contact.service.ts) into a component (contact-list.component). The service contains data on employees defined in contacts.ts. While I was able to successfully receive the data, I encountered difficulty in rendering it ...
I am currently working on extracting the number of rows in an ag-grid. The table is structured as follows: <div class="ag-body-container" role="presentation" style="height: 500px; top: 0px; width: 1091px;"> <div role="row" row-index="0" row-id="0 ...
Here is the code snippet I am working with, where clicking should set the checked value to false: @Component({ template: ` <input type="checkbox" [checked]="checked" (change)="onChange()"> ` }) export class AppC ...
I'm attempting to trigger a POST HTTP request right before the browser closes. Essentially, I want to detect when the user closes the page and send a call, but the request isn't completing before shutdown. It seems like a traditional HTTP reque ...
Using Typescript, React, and Immer, I have set up a state management system to save profiles with multiple options. My goal is to ensure that the active profile has the correct option data before saving it. const { updateProfileList, getProfile } = useProf ...