Skip to main content

d.ts | JS

  • d.ts | JS

alt text

O que são arquivos .d.ts?​

Arquivos com extensão .d.ts (declarações de tipo) são usados para declarar tipos de módulos externos ou arquivos que o TypeScript não entende por padrão, como CSS, imagens ou bibliotecas sem suporte nativo a TypeScript.

Eles ajudam o compilador a aceitar e tipar corretamente importações que não fazem parte do mundo .ts/.tsx.

📁 Onde colocar os arquivos .d.ts?​

Os arquivos .d.ts podem ser colocados em qualquer lugar do projeto, mas os locais mais comuns são:

  • Raiz do projeto: globals.d.ts ou custom.d.ts
  • Pasta types/: types/custom.d.ts

Certifique-se de que o tsconfig.json inclua o arquivo ou a pasta.

⚙️ Exemplo de tsconfig.json​

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "globals.d.ts"]
}

📦 Exemplos práticos​

1. Importação de CSS Global​

Import em código:

import './globals.css';

Declaração em globals.d.ts:

declare module '*.css';

2. CSS Modules (*.module.css)​

Import em código:

import styles from './MyComponent.module.css';

Declaração:

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

3. SVG como React Component (com Vite ou SVGR)​

Import em código:

import { ReactComponent as Logo } from './logo.svg';

Declaração:

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & { title?: string }
  >;

  const src: string;
  export default src;
}

4. Outros arquivos estáticos​

// Imagens
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.webp';

// Fontes
declare module '*.woff';
declare module '*.woff2';
declare module '*.ttf';
declare module '*.otf';

// JSON
declare module '*.json' {
  const value: any;
  export default value;
}

🧠 Boas práticas​

  • Mantenha todos os arquivos de declaração personalizados em uma pasta separada (types/ ou @types/).
  • Nomeie os arquivos de forma clara (globals.d.ts, assets.d.ts, media.d.ts).
  • Nunca escreva lógicas dentro de .d.ts; apenas declarações.
  • Use declare module e nunca import ou require dentro de arquivos .d.ts.

🛠️ Ferramentas que usam muito .d.ts​

  • Next.js
  • Vite
  • Create React App com TypeScript
  • Bibliotecas JS puras usadas em projetos TS
  • Bundlers com Webpack + TS