1

I want to define a function f such that arguments and return types are union types but they are tied, i.e. when you call f(anInputType) you get aCorrespondingOutputType as a result. I tried the following at it seems to work on TypeScript 4.1.3.

class Input1 {
    type1Input: string = "I am type 1!";
}

class Input2 {
    type2Input: string = "I am type 2!";
}

interface Output1 {
    type1Output: string;
}

interface Output2 {
    type2Output: string;
}

export type Input = Input1 | Input2;
export type Output = Output1 | Output2;

function f(_input: Input1): Output1;
function f(_input: Input2): Output2;
function f(_input: Input): Output {
    return null as any as Output;
}

const input = new Input2();

const output = f(input);
output.type2Output // Compiles because the compiler can figure out that output is of type Output2

However, in (my) real life the inputs should be WebGL objects. The same thing, in which I replaced Input1 with WebGLTexture and Input2 with WebGLBuffer, does not compile.

interface Output1 {
    type1Output: string;
}

interface Output2 {
    type2Output: string;
}

export type Output = Output1 | Output2;

function f(_input: WebGLTexture): Output1;
function f(_input: WebGLBuffer): Output2;
function f(_input: WebGLTexture | WebGLBuffer): Output {
    return null as any as Output;
}

const canvas = document.createElement("canvas")!;
const gl = canvas.getContext("webgl")!;
const input = gl.createBuffer()!;

const output = f(input);
output.type2Output // Does not compile because the compiler thinks that output is of type Output1

Am I missing something?

I am reading-ish through these TypeScript issues:

As well as these other questions:

But what troubles me is the difference between the behavior using existing types (i.e. the WebGL objects) versus custom classes.

Actually, I am adopting Alex idea

It looks verbose but with it I can get away with a single implementation. It's kinda of a no-win for me because of the way other parts of the app are organized; something, somewhere, is going to look ugly. But this is good for now! Thanks!

Real-life code below.

export type WebGLResource =
  { texture: WebGLTexture } |
  { buffer: WebGLBuffer } |
  { program: WebGLProgram } |
  { renderbuffer: WebGLRenderbuffer } |
  { framebuffer: WebGLFramebuffer };
export type ResourceMeta = TextureMeta | BufferMeta | ProgramMeta | RenderbufferMeta | FramebufferMeta;

function getMeta(<...omitted params...> resource: { texture: WebGLTexture }, required: true): TextureMeta;
function getMeta(<...omitted params...> resource: { buffer: WebGLBuffer }, required: true): BufferMeta;
function getMeta(<...omitted params...> resource: { program: WebGLProgram }, required: true): ProgramMeta;
function getMeta(<...omitted params...> resource: { renderbuffer: WebGLRenderbuffer }, required: true): RenderbufferMeta;
function getMeta(<...omitted params...> resource: { framebuffer: WebGLFramebuffer }, required: true): FramebufferMeta;
function getMeta(<...omitted params...> resource: { texture: WebGLTexture }, required: false): TextureMeta | null;
function getMeta(<...omitted params...> resource: { texture: WebGLBuffer }, required: false): BufferMeta | null;
function getMeta(<...omitted params...> resource: { buffer: WebGLProgram }, required: false): ProgramMeta | null;
function getMeta(<...omitted params...> resource: { renderbuffer: WebGLRenderbuffer }, required: false): RenderbufferMeta | null;
function getMeta(<...omitted params...> resource: { framebuffer: WebGLFramebuffer }, required: false): FramebufferMeta | null;
function getMeta(<...omitted params...> resource: WebGLResource, required: boolean): ResourceMeta | null {
  ...
}
Improve this question

1 Answer 1

Reset to default
4

Typescript is structural, not nominal. That means that if two type have the same shape, but different names, they are considered the same type. And unfortunately, WebGLTexture and WebGLBuffer appears to have the same shape.

If you cmd+click (or ctrl+click) on either of those types in VSCode or the typescript playground, you can see how they are declared. That yeilds these two declarations:

interface WebGLTexture extends WebGLObject {}
interface WebGLBuffer extends WebGLObject {}

Sadly, both type are simply declared as unaltered WebGLObjects. Typescript cannot tell them apart. So when you try to trigger the second function overload, typescript notices that the first overload matches, and just uses that.

It's hard to advise a better solution from this contrived code, but you probably will want a different approach here.

Maybe you could instead accept an object with keys that make it clear what you're passing in? That way the different overloads and have different argument types.

function f(_input: { texture: WebGLTexture }): Output1;
function f(_input: { buffer: WebGLBuffer }): Output2;
function f(_input: { texture?: WebGLTexture, buffer?: WebGLBuffer }): Output {
    return null as any as Output;
}

const canvas = document.createElement("canvas")!;
const gl = canvas.getContext("webgl")!;

const buffer = gl.createBuffer()!;
const texture = gl.createTexture()!;

f({ texture }).type1Output; // works
f({ buffer }).type2Output; // works

Playground

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you Alex, awesome answer. One of the big selling points of what I am working on is that almost everywhere it uses native WebGL types; what I wanted to do here is, in many ways, an alternative to wrapping. Although I have to say that thanks to the shortened { property } syntax your code looks really good. I'll definitely use this one day. The best option for me, for this project, is probably to abandon overloading and provide separate functions (I only have 5 types to map; texture, buffer, framebuffer, renderbuffer and program). Thank you!
Yeah, overloads can be a bit of a pain. They can be powerful and expressive when used right, but there is nothing wrong with just starting with fBuffer(buffer) and fTexture(texture) either. Less tricky, easier to understand, code is usually good. Happy to help. Good luck!
This problem solutions seems so obscure. Why someone will do that?
> This problem solutions seems so obscure. Yeah, it's not great but my problem is that I have this class that returns WebGL resources; I want them to be returned as raw WebGL objects, not proxied or wrapped or opaqued or anything like that. At any time the user can pass those objects back in and I need to access some per-object additional information to handle those request. I have to live with this for the time being, but the most likely outcome of what I learned today is that probably I will refactor the code to NOT return raw WebGL objects.
The advantage over having multiple function implementations is that with the overloads I only need to write the body once.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.