Tips for creating a TypeScript function that is based on another function, but with certain template parameters fixed

How can I easily modify a function's template parameter in TypeScript?

const selectFromObj = <T, S>(obj: T, selector: (obj: T) => S): S =>  selector(obj) // some function from external library

type SpecificType = {a: string, b: number}
const selectFromSpecificObj: <S>(obj: SpecificType, selector: (s: SpecificType) => S) => S = selectFromObj

// Is there a way to simplify the last two lines like this? 
// Just to set T to {a: string, b: number}
// const selectFromSpecificObj: <S>(typeof selectFromObj<{a: string, b: number}, S>) = selectFromObj
typescriptgenericstypes

Answer №1

Let's explore a method to achieve this. We establish a type that defines the selectFromObj function, where the object type T remains constant, while the return type S varies based on the arguments passed.

type ApplySelectorFunc<T> = <S>(obj: T, selector: (obj: T) => S) => S;

Subsequently, we can create modified references of selectFromObj that solely accept objects of a defined type once we apply the type ApplySelectorFunc with a specific value for T

type SpecificType = {a: string, b: number}

const selectFromSpecificObj: ApplySelectorFunc<SpecificType> = selectFromObj;

const good = selectFromSpecificObj({a: "", b: 1}, o => o.a)  // type = string
const bad = selectFromSpecificObj({a: ""}, o => o.a)  // error

Typescript Playground Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utility managing various asynchronous tasks through observables and signaling mechanism

Looking for a Signal-based utility to monitor the status of multiple asynchronous operations carried out with observables (such as HTTP calls). This will enable using those signals in Components that utilize the OnPush change detection strategy. Imagine h ...

angulartypescriptrxjsrxjs-observablesangular-signals

What is the best way to determine Prisma types across various projects?

My current project has the following structure: dashboard -- prisma-project-1 -- prisma-project-2 -- client-of-prisma-project-1-and-prisma-project-2 This dashboard is designed to merge data from two separate databases and display them in a meaningful w ...

typescriptprisma

Guide on Applying a Dynamic Color in VueJs 3 Composition API/Vuetify Using CSS

Currently, my project utilizes Vue 3 with the composition API and Vuetify for the UI. I am looking to utilize a color that is already defined in a Vuetify theme variable within my CSS, similar to how I have done it previously in JavaScript. Although I at ...

csstypescriptvue.jsvuejs3vuetify.js

Is it feasible to set an empty object as the initial default value in the state of a React component?

In my React application with TypeScript, I am using "react": "^17.0.0". Here is how I define the app state: export interface IRoleState { data: API.RoleItem, menus: API.MenuItem, } When I set up the initial state like this: con ...

reactjstypescript

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

I currently have a Lambda's API Gateway repository in CodeCommit that I successfully build using esbuild with CLI (SAM BUILD and then SAM DEPLOY). Now, I am looking to streamline the building process by integrating it with CodePipeline. I started exp ...

typescriptamazon-web-servicesaws-lambdaaws-codebuildsam

Utilizing a loaded variable containing data from an external API request within the useEffect() hook of a React component

Essentially, I have an API request within the useEffect() hook to fetch all "notebooks" before the page renders, allowing me to display them. useEffect(() => { getIdToken().then((idToken) => { const data = getAllNotebooks(idToken); ...

reactjstypescriptnext.jsreact-hooks

Is it possible to record the attributes within an interface in TypeScript?

Imagine I have the following scenario: interface Validator { validate: (value: string) => boolean; errorMessage: string; } interface EditDialogField { label: string; prop: string; required?: boolean; type: 'input'; validators?: ...

typescriptvisual-studio-codeintellisense

Creating a custom string subtype in TypeScript

I am currently working on developing a game called Risk using TypeScript and React hooks. This game is played on a map, so my first step was to design a MapEditor. The state of the Map Editor is as follows: export interface IMapEditorState { mousePos: ...

javascripttypescriptreact-hooks

Steps for setting up a Node.js Express application that serves a Vue.js single page application

Currently, I am in the process of setting up a Node.js project that incorporates Express to create backend APIs and deliver a Single Page Application (SPA) designed with Vue.js. Upon initializing a project using the Vue cli, components such as the main fi ...

node.jstypescriptexpressvue.jssingle-page-application

AngularTS - Using $apply stops the controller from initializing

Every time I launch the application, the angular {{ }} tags remain visible. Removing $scope.$apply eliminates the braces and displays the correct value. I am utilizing Angular with Typescript. Controller: module Application.Controllers { export class Te ...

angularjstypescript

VPS mysteriously terminates TypeScript compilation process without any apparent error

I've encountered an issue while trying to compile my TypeScript /src folder into the /dist folder. The process works smoothly on my local machine, but when I clone the repo onto my VPS (Ubuntu Server 22.04), install npm, and run the compile script, it ...

node.jstypescriptubuntu-18.04

There is no overload that fits this call (regarding a basic array retrieved from an api)

While attempting to utilize a .map function on a simple array (['a','b','c']) fetched using the useEffect hook, I encountered an error in TypeScript. The array elements rendered correctly when the code was executed and no erro ...

reactjstypescriptmaterial-ui

The module declaration is triggering a lint error that reads "Unexpected token, expecting '{'"

To address the absence of available types for a library, I created the file omnivore.d.ts in TypeScript. Within this file, I added the following line: declare module '@mapbox/leaflet-omnivore' Upon running vue-cli-service lint in my project, an ...

typescript

The term "Movie" is not compatible as a JSX component

Currently working on a movie app project but encountering issues with handling arguments and displaying them properly using TypeScript. The challenge lies in trying to map the movie object, display them individually on the homepage, and showcase all the re ...

reactjstypescriptreact-hooks

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

I have been working on implementing the search bar feature from the provided link. Despite my efforts to match the types correctly, I keep encountering a TypeScript error. Homepage.tsx const [searchQuery, setSearchQuery] = useState(query || '' ...

javascriptreactjstypescriptsearchuse-state

I am not currently working on developing an angular application

Seeking assistance for the issue described below, as I have been struggling with it for three days. Any help would be greatly appreciated. Despite multiple attempts, the situation only seems to worsen with each try. The problem arises when attempting to ...

angulartypescriptnpmangular-cling-build

React experimental is encountering an issue with missing property "" $fragmentRefs"" when relaying fragments

Details Recently, I decided to explore React experimental features with concurrent mode and relay. Even though I have never used relay before, I managed to make progress but ran into some issues. Initially, using the useLazyLoadQuery hook without any frag ...

reactjstypescriptgraphqlrelay

Adjusting the IntelliSense Functionality in Monaco Editor

Currently, I am testing out the CompletionItemProvider feature for my project. I have implemented two separate CompletionItemProviders. One is set to trigger when any alphabet letter is typed and the other triggers when the user enters a single quote chara ...

typescriptmonaco-editor

My requests and responses will undergo changes in naming conventions without my consent or awareness

Initially, I wrote it in a somewhat general manner. If you require more information, please let me know! This is how my C# class appears when sent/received on the frontend: public class Recipe : ICRUD { public Guid ID { get; set; } ...

c#jsonangulartypescriptasp.net-core

Steps for showing a component (popup modal) just one time with React hooks

Is there a way to implement a popup modal that only appears once using hooks and localStorage? The modal should already appear upon page load. const [showModal, setShowModal] = useState<boolean>(true) return( <ModalIsContractor ...

reactjstypescriptreact-hooksnext.js