如何跨项目共享多个TypeScript接口？本地打包方案咨询

Got it, let's break this down into simple, actionable steps to get your TypeScript interfaces packaged and ready to use in other projects. Here's exactly what you need to do:

1. Initialize Your Interface Project #

First, navigate to your project folder (where account.ts, item.ts live) and run this command to set up a basic package.json:

npm init -y

This will generate a default package.json file we’ll tweak next.

2. Configure package.json Key Fields #

Open the generated package.json and update these fields to make your package usable:

{
  "name": "all-my-interfaces", // This is the name you’ll import from later
  "version": "1.0.0",
  "main": "./dist/index.js", // Path to your compiled entry file
  "types": "./dist/index.d.ts", // Critical: Tells TypeScript where your type definitions are
  "scripts": {
    "build": "tsc" // The command to compile your TypeScript files
  },
  "devDependencies": {
    "typescript": "^5.0.0" // We’ll install this next
  }
}

• name: Must match the string you’ll use in import { ... } from 'HERE'
• types: Ensures other TypeScript projects recognize your interfaces
• scripts.build: Uses the TypeScript compiler (tsc) to build your project

3. Set Up TypeScript Configuration #

Install TypeScript as a dev dependency first:

npm install typescript --save-dev

Then create a tsconfig.json file in your project root with these settings:

{
  "compilerOptions": {
    "target": "ES6", // Or any target compatible with your projects
    "module": "CommonJS",
    "declaration": true, // REQUIRED: Generates .d.ts type definition files
    "outDir": "./dist", // Where compiled files will go
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["*.ts"], // Include all your interface files (adjust if they’re in subfolders)
  "exclude": ["node_modules", "dist"]
}

The declaration: true flag is non-negotiable here—it generates the type files that make your interfaces usable in other TypeScript projects.

4. Create an Entry File (Optional but Recommended) #

To let users import all interfaces in one line, create an index.ts file in your project root that re-exports all your interfaces:

// index.ts
export * from './account';
export * from './item';
// Add any other interface files here

This way, other projects can use import { Account, Item } from 'all-my-interfaces' instead of importing from individual files.

5. Compile Your Project #

Run the build command to generate the compiled files and type definitions:

npm run build

You’ll now see a dist folder containing:

• index.js (empty runtime code, since interfaces don’t compile to JS)
• index.d.ts (the type definitions for all your interfaces)
• Individual .d.ts files for each interface (like account.d.ts, item.d.ts)

6. Install the Package Locally in Another Project #

You have two easy ways to use your packaged interfaces in another project:

Option 1: Direct Path Installation #

Navigate to your target project and run:

npm install /absolute/path/to/your/all-my-interfaces-project

Or use a relative path if the projects are in the same folder:

npm install ../all-my-interfaces

Option 2: npm link (For Development Workflow) #

This is great if you’re actively updating your interfaces and want changes to reflect immediately in the target project:

1. In your interface project, run:

   npm link
   

2. In your target project, run:

   npm link all-my-interfaces
   

7. Test It Out! #

In your target project, create a TypeScript file and import your interfaces:

import { Account, Item } from 'all-my-interfaces';

const user: Account = { name: "Alice" };
// TypeScript will enforce the Account interface structure here

You should get full type checking and autocompletion—perfect!

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