TypeScript中使用jquery-mask-plugin报mask不是函数如何解决？

问题根因 #

你仅安装了jquery-mask-plugin的TypeScript类型定义包@types/jquery-mask-plugin，该包仅用于为TS提供类型校验和提示，不包含插件本身的运行时代码，因此实际运行时没有mask方法实现，才会抛出该错误。

解决方案 #

1. 安装插件核心包 #

首先执行命令安装插件的实际运行时代码：

npm install jquery-mask-plugin --save

2. 确保资源加载顺序正确 #

jquery-mask-plugin依赖jQuery，必须严格按照「jQuery → jquery-mask-plugin → 业务代码」的顺序加载资源，避免依赖丢失：

• 如果你是通过ASP.NET Core的布局页引入静态资源，在_Layout.cshtml或对应视图中按如下顺序引入：

<!-- 先引入jQuery -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- 再引入jquery-mask-plugin，路径替换为你实际打包到wwwroot的路径 -->
<script src="~/lib/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<!-- 最后引入你编译后的TS/JS业务代码 -->
<script src="~/js/your-business-code.min.js"></script>

3. TypeScript配置适配 #

• 确认tsconfig.json中已经正确识别类型定义，示例配置如下：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
    "types": ["jquery", "jquery-mask-plugin"]
  }
}

• 如果你使用ES模块方式编写TS代码，需要在业务代码顶部主动导入插件，完成jQuery方法挂载：

import 'jquery-mask-plugin';

// 确保DOM加载完成后调用mask方法
$(function() {
  $("#inputID").mask('AAAAAAAAAA');
});

4. 排查其他常见问题 #

• 检查页面是否重复引入了多次jQuery，重复引入会覆盖之前挂载在jQuery实例上的mask方法
• 确认mask方法调用逻辑放在DOM加载完成的回调中，避免目标输入框还未渲染就执行了绑定逻辑

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