Customizable return type for optional function parameter

Imagine this scenario with a factory function

const createIndex = <PK extends string, SK extends string>(pk: PK, sk?: SK) => ({ pk, sk });
const i1 = createIndex("pk1"); // expected type of i1: { pk: "pk1" }
const i2 = createIndex("pk1", "sk1"); // expected type of i2: { pk: "pk1", sk: "sk1" }

I want to enhance this functionality so that the sk parameter becomes optional, and based on its presence, the return type will either be { pk: PK } or { sk: SK }

The challenge here lies in handling the optional aspect.

typescripttypescript-generics

Answer №1

Utilizing function overloading enables this capability.

My understanding is that you cannot achieve this using arrow functions, as you are unable to redeclare const, which is a requirement for arrow functions.

However, you can experiment with regular function syntax instead.

function example<Type1 extends string, Type2 extends string>(
  type1: Type1
): {
  type1: Type1;
};
function example<Type1 extends string, Type2 extends string>(
  type1: Type1,
  type2: Type2
): {
  type1: Type1;
  type2: Type2;
};
function example<Type1 extends string, Type2 extends string>(type1: Type1, type2?: Type2) {
  return { type1, type2 };
}

const e1 = example("type1"); // expected type of e1 is { type1: "type1" }
const e2 = example("type1", "type2"); // expected type of e2 is { type1: "type1", type2: "type2" }

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

Is there a way to verify a user's authorization status within Next.js 12.1.6 middleware?

I'm implementing a Nextjs middleware to redirect unauthenticated users to the login page. It's currently working locally, but not on the remote server: export async function middleware(req: NextRequest) { const { cookies } = req if (!cook ...

typescriptnext.js

Looking to implement a feature in Angular 2 where content on a page can be filtered based on a single array property of the user

Feeling lost here. I need to filter books on the page by their specific Category (Philosophy, Classic, Poetry, etc.) when a user clicks a corresponding button. However, I'm new to Angular and coding in general, so I really want to grasp this concept f ...

htmlarraysangulartypescriptfilter

The parameter type '{ email: string; }' in NGXS does not accept arguments of type 'string'

Struggling to retrieve data from an API using ngxs with this.store.dispatch(new GetUser(userEmail)) Attempted to use the user id stored in local storage as a string and convert it to a number but encountered a similar error (Argument of type 'string&a ...

angulartypescriptngxs

What does Typescript compile when aiming for ES5 / ES3?

I'm currently grappling with the nuances of when the Typescript compiler decides to transpile code in order to align it with my designated target ECMAScript version (ES5 or ES3). As an example, TSC has no problem transpiling for(var int of intArray); ...

typescripttargettranspiler

Using GSAP in an Ionic application

What is the best way to add the GSAP library to an Ionic project? Simply running npm install gsap doesn't seem to work when I try to import it using: import { TweenMax, TimelineMax} from "gsap"; I am currently using TypeScript. Thank you. ...

typescriptionic-frameworkgsap

Using CKEditor5 to Capture and Edit Key Presses

I'm currently working on capturing input from a CKEditor5 within an Angular application using TypeScript. While I am able to successfully display the CKEditor and confirm its presence through logging, I am facing difficulties in capturing the actual i ...

angulartypescriptkeyboardckeditorckeditor5

What are some ways to establish a connection with the store in components that are not using React

It's been a struggle trying to connect to the store using non-react components. Whenever I attempt to use getState or dispatch in a non-react class like this: createStoreWithApi(api).dispatch(isLoading(true)), it ends up creating a new instance of the ...

javascriptreactjstypescriptreduxreact-redux

Issue connecting database with error when combining TypeORM with Next.js

I am attempting to use TypeORM with the next.js framework. Here is my connection setup: const create = () => { // @ts-ignore return createConnection({ ...config }); }; export const getDatabaseConnection = async () => { conso ...

typescriptconnectionnext.jstypeorm

Navigating the complexities of generic types in Typescript involves understanding how to work

Having an issue with my React + TypeScript application. I am trying to write a function to filter some data: function matchesFilter(element: T, filter: Filters) { const { name, options } = filter; return options.filter(selected => select ...

typescript

Enhance VSCode Intellisense feature to unwrap TypeScript types

Consider the following scenario: type X = Blob | File; function printX(x: X) { console.log(x); } When using VSCode intellisense and calling the function, I am prompted with: printX(x: X): void The issue arises when I'm unsure of what type X rep ...

typescriptvisual-studio-code

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

In my project using TypeScript (Angular 5), I encountered the following scenario: let date = new Date(2018, 8, 17, 14, 0); The expected output should be "Fri Aug 17 2018 14:00:00 GMT-0400 (Eastern Daylight Time)", but instead, it is returning: Mon Sep ...

javascriptangulartypescriptdateangular5

NestJS Resolver Problem: Getting an Undefined Error

Could use a bit of assistance. I'm currently working on a mutation and encountering the following error: ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'entryUser') Here is the resolver code snippet: export class Us ...

node.jstypescriptgraphqlnestjsapollo

Is state change causing props to be overwritten?

I'm facing a peculiar issue in my code, and I'm having trouble pinpointing the root cause. In essence, it seems like the props I'm passing to a functional component are getting overridden by a state change (which should not be affecting the ...

javascriptreactjstypescriptreact-hooks

A guide on utilizing mockDOMSource for testing a sequence of actions within Cycle.js

Although I am aware that there might be a more efficient way using cycle/time, my main focus is to grasp the fundamentals. For some reason, my action$ stream does not appear to be functioning; I have attempted to create multiple mock doms using xs.period ...

javascripttypescriptmocha.jscyclejs

How can I display and link a base64 string to an Image as a source in Nativescript?

I'm having trouble displaying and binding a base64 image as an ImageSource in my View. The image doesn't show up at all, and I couldn't find any helpful information about it in the documentation. Am I missing something? The imageSource prop ...

androidtypescriptnativescript

Utilizing images in a compiler run with the option of `allowJS:true` is key

Looking to develop a React Native library using JavaScript instead of typescript, but want to leverage TSC for its ability to generate type declarations from jsdoc comments. However, encountering an issue where local images are not included when the ts com ...

typescripttsc

Extracting and retrieving the value from the paramMap in Angular/JavaScript

How can we extract only the value from the router param map? Currently, the output is: authkey:af408c30-d212-4efe-933d-54606709fa32 I am interested in obtaining just the random "af408c30-d212-4efe-933d-54606709fa32" without the key "authke ...

javascriptangulartypescript

What is the method for substituting one text with another using two-way data binding?

I implemented two different cases in my Mat-Table. When there is no data, the user will see a message saying "No Data Found". However, if the user enters text in the filter search, the "No Data Found" message should be hidden and replaced with the entered ...

javascriptangulartypescriptmat-table

Issue: Button ClickEvent is not triggered when the textArea is in onFocus mode

Is there a way to automatically activate a button ClickEvent when the textArea input is focused? Keep in mind that my textArea has some styles applied, causing it to expand when clicked. Here is an example: https://stackblitz.com/edit/angular-ivy-zy9sqj?f ...

angulartypescriptonclickbuttonclick

tying [inactive] to a specific attribute

I have successfully implemented the functionality to disable the button when the email is in the correct format, as shown in my code below. Now, I am looking to implement the following scenario: The Get Started button should be disabled by default If a u ...

angulartypescript