Are there any type definitions for JSX in astro?

Question

@typescript-eslint/no-unsafe-return rule doesn't work well with .astro files, because the return type of any jsx is any, so any .map results in no-unsafe-return rule error.

---
const cards = [
    {
        href:"https://docs.astro.build/",
        title:"Documentation",
        body:"Learn how Astro works and explore the official API docs.",
    },
    {
        href: "https://astro.build/integrations/",
        title: "Integrations",
        body: "Supercharge your project with new frameworks and libraries.",
    },
    {
        href: "https://astro.build/themes/",
        title: "Themes",
        body: "Explore a galaxy of community-built starter themes.",
    }
];
---

<main>
    {cards.map((card) => (
        // next line has following error: Unsafe return of an `any` typed value. eslint(@typescript-eslint/no-unsafe-return)
        <div>{card.href}</div>
    ))}
</main>

Are there any type definitions for astro jsx? I found some types inside node_modules/astro/astro-jsx.d.ts, but I'm not sure how to use them.

You decide which ESLint errors are important to you and which aren't. You can turn off rules at the project, file, or line level; you can also declare the return type of a call to `map` easily enough with `as` (see Related links). — Heretic Monkey, Sep 08 '22 at 00:41
Ofcourse I don't want to turn off ESLint rules. Especially for the entire file, because errors can happen at the frontmatter of the file. Yes, as a temporary solution I could use `as`, but what should I cast it to? And why should I even do that? Shouldn't there already be a type for `
` element? — Temoncher, Sep 08 '22 at 09:16
Hello, I'm facing the same issue and don't want to disable any eslint rule. Did you find a solution? — vic1707, Jan 30 '23 at 20:10
I didn’t. I just made an ESLint override for .astro files where I disabled all no-unsafe-* rules ¯\_(ツ)_/¯ — Temoncher, Feb 19 '23 at 13:04

score 1 · Answer 1 · answered Feb 23 '23 at 11:07

If you are using eslint-plugin-astro, I raised this as an issue after encountering the same problem Link. The suggested solution from plugin author was to create a .d.ts file to declare the below namespace. Then reference that file in my tsconfig.eslint.json.

example.d.ts

import 'astro/astro-jsx'

declare global {
    namespace JSX {
        type Element = HTMLElement
        // type Element = astroHTML.JSX.Element // We want to use this, but it is defined as any.
        type IntrinsicElements = astroHTML.JSX.IntrinsicElements
    }
}

My `tsconfig.eslint.json:

{
  "extends": "./tsconfig.json",
  "include": [
    //...
    "example.d.ts"
  ]
}

Are there any type definitions for JSX in astro?

1 Answers1