CODEWITHSUNDEEP
typescript
Michael Pacheco
Michael Pacheco

Reputation: 1164

Export same function with different names and types

Edit

Thanks to @jsejcksn, I think I solved the problem: TS Playground

I'm building a function to help me use media queries with the tailwind library. This library has some predefined named breakpoints like xs, lg, etc. But I also want to define my own named breakpoints like mobile, desktop, etc.

So I have created two "different" functions:

interface AppBreakpointQuery {
  breakpoint: 'mobile' | 'tablet' | 'notebook' | 'desktop';
  query: string;
}

interface TailwindBreakpointQuery {
  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  query: string;
}

const tailwindBreakpoints: TailwindBreakpointQuery[] = [
  { breakpoint: 'xs', query: '(min-width: 640px)' },
  { breakpoint: 'sm', query: '(min-width: 768px)' },
  { breakpoint: 'md', query: '(min-width: 1024px)' },
  { breakpoint: 'lg', query: '(min-width: 1280px)' },
  { breakpoint: 'xl', query: '(min-width: 1536px)' },
];

const appBreakpoints: AppBreakpointQuery[] = [
  { breakpoint: 'mobile', query: '(min-width: 340px)' },
  { breakpoint: 'tablet', query: '(min-width: 500px)' },
  { breakpoint: 'notebook', query: '(min-width: 1024px)' },
  { breakpoint: 'desktop', query: '(min-width: 1280px)' },
];

type TailwindBreakpointValue<T> = {
  [key in TailwindBreakpointQuery['breakpoint']]: T;
};

type AppBreakpointValue<T> = {
  [key in AppBreakpointQuery['breakpoint']]: T;
};

function useAppBreakpoint<T>(initialValue: T, value: AppBreakpointValue<T>): T;
function useTailwindBreakpoint<T>(initialValue: T, value: TailwindBreakpointValue<T>): T;

The big problem here is that those functions has the exactly same implementation.

I want to know if is possible to export only one function under different names and params (useAppBreakpoint and useTailwindBreakpoint) without duplicating code.

Another simplified example:

Given a function add that add it's parameters like

function add(a: any, b: any) { return a + b }

How do I export this same function as addOne and addTwo. Something like:

type One = 1
type Two = 2

function addOne(a: string, b: One): number;

function addTwo(a: number, b: Two): number;

export {
  add as addOne,
  add as addTwo,
}

The idea here is that addOne === addTwo should be true

Upvotes: 1

Views: 521

Answers (1)

jsejcksn
jsejcksn

Reputation: 33881

Using your addition example:

TS Playground

function add (a: any, b: any): number {
  return a + b;
}

type One = 1
type Two = 2

type AddOne = (a: string, b: One) => number;
type AddTwo = (a: number, b: Two) => number;

export const addOne: AddOne = add;
export const addTwo: AddTwo = add;

Upvotes: 2

Related Questions