Type Folder

types directory in the TS project

Updated date: 2025-02-07

The types/ folder is a convention used to store type definitions and interfaces. It is not a required or built-in feature of TypeScript but is commonly used to keep type-related files organized.

If you encounter an undefined type, you need to create a type file corresponding to the module.

For example,

./app/actions.ts:3:21
Type error: Could not find a declaration file for module 'web-push'. '/home/binoue/github.com/banban9999/nextjs-blog/node_modules/web-push/src/index.js' implicitly has an 'any' type.
  Try npm i --save-dev @types/web-push if it exists or add a new declaration (.d.ts) file containing declare module 'web-push';

  1 | "use server"
  2 |
> 3 | import webpush from "web-push"
    |                     ^
  4 |
  5 | webpush.setVapidDetails(
  6 |   '<mailto:your-email@example.com>',

types/web-push.d.ts

declare module 'web-push' {
  const webpush: any;
  export default webpush;
}

tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

As shown above, the location of the self-defined type files must be written in the tsconfig.json. Plese be aware that, if typeRoots is specified, only packages under typeRoots will be included