Fixing TS issues in VS Code - Astro

Sometimes I run into issues in VS Code when working in my Astro projects, I don’t know it it’s VS Code, TypeScript, Astro, more likely a combination of it all.

Sometimes errors are subtle / confusing, for example in one case I create a file and imported it, but I got a red line under the import saying Cannot find module ... or its corresponding type declarations

You can try opening the VS Code command palette and execute Developer: Restart Extension Host or Developer: Reload Window and more often than not, the error goes away.

Also try stopping npm run dev and restarting it.

Final try, close VS Code and reopen it.

In one case I created a collection but TS didn’t pick up the type of the posts correctly, and got “any”:

In this case I had to create a markdown file for my content collection first, corresponding to how I defined the collection in my content/config.ts in src/content/blog/test.md, then the error went away.

That was easy.

Other times it’s an import error. First of course check the path is correct.

If using @ imports, check tsconfig.json contains that and the file is saved.

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@lib/*": ["src/lib/*"],
      "@data/*": ["src/data/*"],
      "@src/*": ["src/*"],
    }
  }
}

One issue a student of mine had with an Astro site that used content collections was that the TS types for that collection were not generated, and had errors like “Property ‘render’ does not exist on type ‘never‘“

Running npx astro sync fixed the issue.