Having this specific shape
const shape = {
foo: () => 'hi',
bar: (arg) => typeof arg === 'string'
// argument is expected to be a string because foo returns a string
}
Is there a way to connect the return type of foo to the input type of bar?
I have attempted various versions of conditional types similar to
type Cond<T> = T extends { foo: () => infer A }
? { foo: () => A; bar: (arg: A) => bool }
: never
but so far, no success. Any suggestions?
In taking a brief moment to set aside the self-referential object, a straightforward approach emerges using the ReturnType utility type from TS:
const foo = () => "hi";
const bar = (arg: ReturnType<typeof foo>) => typeof arg === "string";
const shape = { foo, bar };
To enhance clarity, we can establish a shape interface that connects the two methods through the object itself:
interface Shape {
foo: () => string;
bar: (arg: ReturnType<Shape["foo"]>) => boolean;
}
const shape: Shape = {
foo: () => "hi",
bar: (arg) => typeof arg === "string"
}
Additionally, a utility or factory function can be crafted to dynamically achieve this for any pair of provided methods utilizing generics:
const asMyShape = <
F extends () => void,
B extends (arg: ReturnType<F>) => void
>(foo: F, bar: B) => ({ foo, bar });
const shape = asMyShape(() => "hi", (arg) => typeof arg === "string");
This particular challenge can be tackled using generics:
class Shape<T> {
public checkType = (arg: T) => typeof arg === 'string';
constructor(
public generateValue: () => T,
) {}
}
const exampleA = new Shape(
() => 'test'
);
const exampleB = new Shape(
() => 43
);
exampleA.checkType(exampleA.generateValue());
exampleB.checkType(exampleB.generateValue());
You can find a functional demo here.
If you try to pass an incorrect type to the checkType function, the compiler will produce an error message:
exampleB.checkType('string'); // Argument of type 'string' is not assignable to parameter of type 'number'.
I'm currently working on a project that has an entrypoint index.ts in the main folder, with all other files located in src (which are then built in dist). However, I've noticed that when I try to use autocomplete or quick fix to import existing ...
This particular issue is related to retrieving a value from local storage. I am trying to set the default header (Authorization token) for all requests, but I can't seem to find a solution that works efficiently. Most of the resources available only e ...
I encountered a situation in my team's application where we need the ability to dynamically compose component wrappers (HOCs) without prior knowledge of all the wrapper interfaces. This is mostly needed for swapping out context providers when renderin ...
An issue has arisen due to the code below "Static members cannot reference class type parameters." This problem originates from the following snippet of code abstract class Resource<T> { /* static methods */ public static list: T[] = []; ...
In my Angular 7 app, I have an entity defined in my typescript file as follows: export class FeedbackType { id: number; name: String; } I am looking to create a function within this entity that checks the value of a property. For example: feedba ...
I'm currently working on a proof of concept for a basic monorepo application. To structure my packages, I've decided to use Yarn Workspaces instead of Lerna as it seems more suitable for my needs. One of the packages in my setup is shared, which ...
Just starting out with react. I've encountered an issue where a prop used in a function outside the render is coming up as undefined, and trying to use it to set a state value isn't working either. I've researched this problem and found va ...
Perhaps a typical TypeScript question. Let's take a look at this simple filtering code: interface Person { id: number; name?: string; } const people: Person[] = [ { id: 1, name: 'Alice' }, { id: 2 }, { id: 3, name: 'Bob&apos ...
Currently, I am working on writing tests with Playwright within the /tests directory. I want to include some helper functions that can be placed in the /tests/lib/helpers folder. When the import does not specifically have a .ts extension, tests throw a mo ...
I am seeking clarification on how to utilize the TranslocoService in TypeScript. Imagine I have two lang JSON files for Spanish and Portuguese named es.json and pt.json. Now, suppose I have a component that displays different labels as shown in the followi ...
I need some guidance on creating unit tests for a Custom Form Control in Angular 9. The issue arises with this line of code: constructor(@Self() private ngControl: NgControl), which triggers an error: Error: NodeInjector: NOT_FOUND [NgControl]. It seems th ...
I am dealing with an issue where my TypeScript does not flag errors when I break an object in an array. The column object is being used for a Knex query. type Test = { id: string; startDate: string; percentDebitCard: number, } const column = { ...
Currently, I am attempting to add type hints to my props within a Vue 3 component using the composition API. This is my approach: <script lang="ts"> import FlashInterface from '@/interfaces/FlashInterface'; import { ref } from &a ...
Being a novice in React and Next, I recently embarked on a project that involves uploading a profile picture. However, every time I try to upload an image, an error pops up. Error: The src prop (http://localhost:3333/files/ SOME IMAGE.jpg) is invalid on n ...
I recently utilized amcharts to construct a bar chart. The creation of my stacked bar chart was inspired by this specific example. Currently, I am attempting to modify the alpha (or color) of a box when hovering over another element on my webpage, such as ...
Having trouble using the methods of the Response object in my TypeScript method. When I try to log it, all I get is an empty object. It seems like the import is not providing the response as expected. import { Response } from 'express'; async sen ...
I'm currently working on an Angular project and I have a query regarding TypeScript. It's about correctly handling the scenario where a field should not be included in an object if its value is undefined. In my code, I am initializing an object ...
I'm struggling to retrieve values from a Nodelist of input elements. Can anyone help me out? let subtitleElements = document.querySelectorAll( '.add-article__form-subtitle' ); ...
After receiving a stringVariable from the backend service, I successfully converted it into a Date field with the following code snippet. date d = new Date(stringVariable ); While this conversion worked fine, the resulting date format is not what I requ ...
In the process of developing a project using Angular, I recently made the switch from VS Code to WebStorm. Unfortunately, I'm encountering some difficulties that I can't seem to make sense of. To ensure everything is functioning correctly, I perf ...