如何在现有MVC项目中引入TypeScript并避免重复打包模型对象

针对你这种模型已提前全局加载、视图文件按需加载的场景，完全可以不用import引用模型，同时保留TypeScript的类型检查能力，下面是几种可行方案：

1. 全局类型声明（推荐） #

因为模型已经在客户端全局作用域（比如挂载在window上），你可以通过类型声明文件让TypeScript识别这些全局对象的类型，无需导入。

• 新建一个全局类型声明文件，比如global-models.d.ts：

// 先定义模型的类型结构
declare interface UserModel {
  id: number;
  username: string;
  email: string;
}

declare interface OrderModel {
  orderId: string;
  totalAmount: number;
}

// 把模型挂载到window全局对象上
declare global {
  interface Window {
    UserModel: typeof UserModel;
    OrderModel: typeof OrderModel;
    // 其他模型依次添加
  }
}

// 确保这个文件被当作模块处理
export {};

• 在视图的TypeScript文件中，直接使用全局对象即可，TypeScript会自动识别类型：

// 直接使用window上的模型
const user = window.UserModel;
console.log(user.id); // 有类型提示

如果你的模型是直接暴露在全局作用域（而非挂载在window），可以简化声明：

declare const UserModel: {
  id: number;
  username: string;
  email: string;
};

2. 类型断言（临时场景） #

如果只是临时使用某个模型，不想写全局声明，可以用类型断言直接指定全局变量的类型：

// 假设全局已存在currentUser实例
const currentUser = window.currentUser as {
  id: number;
  username: string;
};

这种方式比较灵活，但没有全局声明的类型提示全面，适合简单场景。

3. 打包工具配置externals（保留import语法） #

如果习惯用import语法，又不想让模型代码被打包进视图文件，可以通过打包工具（比如Webpack、Vite）的externals配置，告诉工具该模块已在全局存在，无需打包：

Webpack示例： #

// webpack.config.js
module.exports = {
  // 其他配置
  externals: {
    // 键：你在代码中import的路径，值：全局作用域中的变量名
    '@/models/User': 'UserModel',
    '@/models/Order': 'OrderModel'
  }
};

之后在视图文件中正常import：

import UserModel from '@/models/User';

// 使用模型，打包时不会包含UserModel的代码，直接引用全局变量
const newUser = new UserModel();

关键注意点 #

• 确保模型文件加载后，确实将模型对象暴露在全局作用域（比如通过window.UserModel = UserModel或直接全局变量声明）；
• 全局类型声明文件要确保被TypeScript识别（可在tsconfig.json的include中添加该文件路径）。

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