如何关联.d.ts文件与.js模块及为.js模块制作TypeScript定义文件并启用IntelliSense

Alright, let's break down both of your questions step by step—these are super common pain points when mixing JavaScript and TypeScript, so I’ve got you covered.

There are a few scenarios here, depending on how your files are structured:

Scenario 1: Same filename, same directory (the easiest case) #

If your .d.ts and .js files share the same name and live in the same folder (e.g., utils.js and utils.d.ts), TypeScript will automatically associate them without any extra configuration. Just make sure your tsconfig.json includes the directory containing these files. For example:

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true, // Useful if you're working with JS and TS together
    "target": "ESNext"
  },
  "include": ["src/**/*"] // Covers all files in src/ and its subfolders
}

The type definitions in utils.d.ts will automatically apply to utils.js whenever you import it.

Scenario 2: Different filenames or separate directories #

If your type file has a different name or lives elsewhere, you have two reliable options:

Option A: Use package.json's types field (for npm packages or project modules) #

If your JavaScript module is part of a package (or you want to treat it like one), add a types field to your package.json pointing directly to your .d.ts file. For example:

// package.json
{
  "name": "my-utils",
  "main": "./dist/utils.js",
  "types": "./src/utils.d.ts" // Path to your type definition file
}

TypeScript will prioritize this path when resolving types for your module.

Option B: Explicitly declare the module in your .d.ts file #

If you don't want to mess with package.json, you can use declare module to map the module path to your type definitions. For example, if your JS file is src/utils.js and your type file is src/types/utils.d.ts:

// src/types/utils.d.ts
declare module '../utils' {
  export function formatName(first: string, last: string): string;
  export const defaultGreeting: string;
}

Now, when you import { formatName } from '../utils', TypeScript will pull the types from this declaration.

Let's walk through this with a concrete example. Suppose you have a math.js file that looks like this:

// math.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

export default class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

Step 1: Create the corresponding .d.ts file #

Make a math.d.ts file (same name, same directory is best for auto-detection) and define types that match your JS module's exports:

// math.d.ts
// For named exports
export function add(a: number, b: number): number;
export const PI: number;

// For default export
export default class Calculator {
  multiply(a: number, b: number): number;
}

If your JS uses CommonJS (e.g., module.exports = { add }), adjust the declaration to match:

// math.d.ts for CommonJS
declare module './math' {
  export function add(a: number, b: number): number;
  export const PI: number;
}

Step 2: Ensure your editor/TypeScript can find the file #

Double-check your tsconfig.json to make sure the directory with your .d.ts file is included in the include array (like the example in Scenario 1). Most modern editors (VS Code, WebStorm) will automatically pick up the .d.ts file if it's in the same directory or included in your config.

Step 3: Verify IntelliSense is working #

Open a TypeScript file, import your JS module, and start using its exports. For example:

import Calculator, { add, PI } from './math';

add(2, 3); // IntelliSense should show (a: number, b: number) => number
console.log(PI); // Should show type number
const calc = new Calculator();
calc.multiply(4, 5); // Should get parameter hints

If IntelliSense isn't picking up the types, try:

• Restarting your editor (VS Code often needs a quick reload to recognize new type files)
• Checking for syntax errors in your .d.ts file (even a missing semicolon can break it)
• Confirming the module path in your import matches the path in your declare module statement (if used)

内容的提问来源于stack exchange，提问作者MyNameJEff