Dynamically load string at runtime

[freeform99]

First of all: Thank you for this great package! (Warning: I am a complete beginner at this.)

My question is: How do I access a translation if I know only at runtime which translation I want to grab? For context: I use SvelteKit to build a personal blog. Each blog post has a list of categories / topics attached to it and I'd like to translate these categories. Currently, I load my translations like this:

<script lang='ts'>
	import LL from '$i18n/i18n-svelte.ts';
</script>

<div>
	This is a greeting: {$LL.greeting()}
</div>

So this works well when I know which string I want to load. However, since the categories / topics are different for each blog posts, I don't know how to load the corresponding string.

This is what I've tried:

<script lang='ts'>
	import LL from '$i18n/i18n-svelte.ts';
        export let categories;
        /*populate categories*/
</script>

<div>
	{#each categories as item}
		<span>{$LL.item()} {$LL[`$item()`]}</span>
	{/each}
</div>

Both approaches produce no output even when the item in question exists in the translation dictionary. (For example, greeting.) Any help would be appreciated! (This may be more of a Svelte question than a typesafe-i18n question.)

[freeform99]

Found the answer! Sometimes it helps to try to explain something to someone else :)

So this works:

<div>
	{#each categories as item}
		<span>{$LL[item]()}</span>
	{/each}
</div>

[ivanhofer]

Good 😊
The LL translation store behaves like a normal JavaScript-object. So you can also access properties via the bracket notation [variable].

[nkoehring]

I need to do exactly this, but how to type variable here? I tried something like:

type TranslationKey = keyof TranslationFunctions
LL.foo[bar as TranslationKey]()

but to no avail.

[ivanhofer]

Answered here.