Skip to content

How I fixed some trouble importing types in .d.ts files

I had some trouble making something work in my Astro site.

I used Astro locals and I had to type a variable I shared using locals.

So I went and added that to the src/env.d.ts, as the docs say.

But my types weren’t picked up.

My code looked like this:

/// <reference types="astro/client" />
import { sometype } from 'somelib'

declare namespace App {
  interface Locals {
    somevariable: sometype
  }
}

What I discovered thanks to this SO answer is, we can’t do imports like this in .d.ts files.

So I imported the type in another file, and then I imported the type from that file, like this:

typesforenvdts.ts

import { sometype } from 'somelib'

export { sometype }

env.d.ts

/// <reference types="astro/client" />

declare namespace App {
  interface Locals {
    somevariable: import('./typesforenvdts').sometype
  }
}

Don’t ask me why, but now it works.

→ Get my JavaScript Beginner's Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list