如何根据Typescript中的字符串参数定义函数的参数类型？

Question

I have a existing function in Javascript code for which I'm trying to write a type definition file in order to have strict type checking. It is used like this:

createElement("a", {href: "www.example.com"});

The project uses custom html elements. The first argument is a string with the tag and as you can see the type of the second argument is dependent on the string tag, as it should be an attribute-to-value map consistent with what the tag expects.

I'm trying something like this but it does not work.

type Tag<T> = string;
const stringTag: Tag<string> = "IamString";
const numberTag: Tag<number> = "IamNumber";

function doStuff<T>(
    tag: Tag<T>,
    content: T
): void {
    console.log(tag, content);
}

doStuff(stringTag, "IshouldBeString");
doStuff(numberTag, "IshouldBeNumber"); // Should be WRONG
doStuff(numberTag, 10); // CORRECT

It complains about the unused "T" argument and does not complain about the wrong string parameter with the numberTag. If I use an existing generic type like Array<T> instead of Tag<T> , doStuff correctly constraints the second argument.

I'm trying to maintain the existing api (the string-typed tag), but could consider changing it.

Thanks.

Answer 1

The only way I can think of doing this with is 'string literal types', and conditional types, so you'll have to manually spell out all those type definitions.

type TagType = "a" | "button";
type Tag<T extends TagType> =
    T extends "a" ? AType :
    T extends "button" ? ButtonType : never;

interface AType {
    href: string;
}

interface ButtonType {
    onClick: () => void
}

function doStuff<T extends TagType>(tag: T, content: Tag<T>) {
    console.log(tag, content)
}

doStuff("a", { href: "" }); // CORRECT
doStuff("button", { href: "" }); // WRONG
doStuff("button", { onClick: () => {} }); // CORRECT