TypeScript: Restricts arguments of a function

Question

could someone give me a hint on how to restrict the valid arguments of the function getMessage:

type Translations = {
    readonly [key: string]: Localize;
}

interface Localize {
    readonly "en": string,
    readonly "de"?: string,
    readonly "fr"?: string
}

const translationsObj: Translations = {
    "keyOne": { "en":"one", "de":"eins" },
    "keyTwo": { "en":"two", "de":"zwei" }
};

type TranslationKeys = keyof typeof translationsObj; // = string | number

function getMessage(key: TranslationKeys) {
    return translationsObj[key]["de"];
}

const msg1 = getMessage("keyOne"); // OK
const msg2 = getMessage("notAPropOfTranslationsObj"); // should be marked as error

Only the properties of the object translationsObj should be allowed to be passed.

Roland

Akxe · Accepted Answer · 2022-09-24 11:54:35Z

2

If you were to use Typescript 4.9 beta, you could use the satisfies operator; it does exactly what you want.

type Translations = {
    readonly [key: string]: Localize;
}

interface Localize {
    readonly "en": string,
    readonly "de"?: string,
    readonly "fr"?: string
}

const translationsObj = {
    "keyOne": { "en":"one", "de":"eins" },
    "keyTwo": { "en":"two", "de":"zwei" }
} satisfies Translations;

type TranslationKeys = keyof typeof translationsObj; // = string | number

function getMessage(key: TranslationKeys) {
    return translationsObj[key]["de"];
}

const msg1 = getMessage("keyOne"); // OK
const msg2 = getMessage("notAPropOfTranslationsObj"); // error

Playground link

answered Sep 24, 2022 at 11:54

Akxe

11.8k6 gold badges43 silver badges80 bronze badges

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

2 Comments

Jeff Mercado Over a year ago

Ooh, good to know and very useful. I've had to work around this so much, this would make things a lot easier.

Roland Dreger Over a year ago

That works great with Typescript 4.9 beta, that's what I was looking for, thanks Akxe.

Jeff Mercado · Accepted Answer · 2022-09-24 11:34:58Z

2

Get rid of the Translations type. By defining it as a map, you're basically saying its keys are unbounded and can be any string.

Instead, just define it in terms of what keys are available and create a record out of that.

type TranslationKeys = "keyOne" | "keyTwo";

const translationsObj: Record<TranslationKeys, Localize> = {
    "keyOne": { "en":"one", "de":"eins" },
    "keyTwo": { "en":"two", "de":"zwei" }
};

function getMessage(key: TranslationKeys) {
    return translationsObj[key]["de"];
}

const msg1 = getMessage("keyOne"); // OK
const msg2 = getMessage("notAPropOfTranslationsObj"); // error

playground

On the other hand, if you have a lot of keys you map out, then you might want to create a helper function to get the right types.

const translations = <T extends { [key: string]: Localize }>(t: T) => t as Record<keyof T, Localize>;

const translationsObj = translations({
    "keyOne": { "en":"one", "de":"eins" },
    "keyTwo": { "en":"two", "de":"zwei" }
});

type TranslationKeys = keyof typeof translationsObj;

playground

edited Sep 24, 2022 at 11:34

answered Sep 24, 2022 at 9:18

Jeff Mercado

136k34 gold badges268 silver badges282 bronze badges

4 Comments

Roland Dreger Over a year ago

Thank you for your reply Jeff. So I have to write the keys twice, right? There will be many more properties in the object translationsObj. I wanted to avoid that.

Jeff Mercado Over a year ago

In that case, you'll need a helper function to help build the type.

Roland Dreger Over a year ago

I'll have a look at it too, thanks!

Akxe Over a year ago

Good job with that helper function

Collectives™ on Stack Overflow

TypeScript: Restricts arguments of a function

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related