Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

type errors using extended i18n schema #1787

Closed
1 task
emeraldsquirrel opened this issue Apr 25, 2024 · 1 comment · Fixed by #1786
Closed
1 task

type errors using extended i18n schema #1787

emeraldsquirrel opened this issue Apr 25, 2024 · 1 comment · Fixed by #1786

Comments

@emeraldsquirrel
Copy link

What version of starlight are you using?

0.21.5

What version of astro are you using?

4.6.4

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu Linux

What browser are you using?

Firefox

Describe the Bug

After defining a i18n extension in /src/content/config.ts per the docs, say like so:

i18n: defineCollection({
		type: 'data',
		schema: i18nSchema({
			extend: z.object({
				'rightSidebar.contribute': z.string().optional(),
				'rightSidebar.editPage': z.string().optional(),
				'rightSidebar.translatePage': z.string().optional(),
			}),
		}),
	}),

Then when you try to use it in a component, like say TableOfContents.astro:

const { labels } = Astro.props;
---
<h2 class="contribute">{labels['rightSidebar.contribute']}</h2>

The labels['rightSidebar.contribute'] has a type error.

When you run astro check, astro build, or have an editor like vscode with the astro and typescript extensions, you get an error:

src/components/starlight/TableOfContents.astro:21:25 - error ts(7053): Element implicitly has an 'any' type because expression of type '"rightSidebar.contribute"' can't be used to index type '{ "skipLink.label": string; "search.label": string; "search.shortcutLabel": string; "search.cancelLabel": string; "search.devWarning": string; "themeSelect.accessibleLabel": string; "themeSelect.dark": string; ... 30 more ...; "expressiveCode.terminalWindowFallbackTitle"?: string | undefined; }'.
  Property 'rightSidebar.contribute' does not exist on type '{ "skipLink.label": string; "search.label": string; "search.shortcutLabel": string; "search.cancelLabel": string; "search.devWarning": string; "themeSelect.accessibleLabel": string; "themeSelect.dark": string; ... 30 more ...; "expressiveCode.terminalWindowFallbackTitle"?: string | undefined; }'.

Lastly, I would have expended the Starlight docs on extending the i18n schema to also tell me how to use the new labels. Sadly they do not. HiDeoo was kind enough in discord to mention instead of using useTranslation starlight internals, I could not use the labels property on the component. This should be documented, preferably in the same section.

Link to Minimal Reproducible Example

N/A

Participation

  • I am willing to submit a pull request for this issue.
@emeraldsquirrel
Copy link
Author

Chris was kind enough to look into this right away via Discord conversation, see: #1786

@delucis delucis mentioned this issue Apr 25, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix type inference for extended i18n schemas withastro/starlight
1 participant
@emeraldsquirrel