Angular使用声明的scriptjs模块时提示找不到$script名称的问题

你安装的@types/scriptjs类型定义采用的是模块导出模式，没有声明全局作用域下的$script变量，因此直接调用全局$script时TS无法识别类型。你遇到的其他扩展全局作用域的包报错，也是同样的原因。

方法一：显式导入（推荐） #

符合Angular模块开发规范，无需修改全局配置，在需要使用scriptjs的文件顶部导入即可：

import * as $script from 'scriptjs';

导入后直接调用$script('xxx.js', () => {})即可正常识别，无类型报错。

完整使用示例 #

// 任意组件/服务文件
import { Injectable } from '@angular/core';
import * as $script from 'scriptjs';

@Injectable({ providedIn: 'root' })
export class ScriptLoadService {
  loadScript(url: string, callback: () => void) {
    $script(url, callback);
  }
}

方法二：全局注册（适合多文件频繁调用场景） #

如果不想每个文件都单独导入，可以手动补充全局类型声明：

1. 在项目src目录下新建global.d.ts文件（如果已有则直接修改），添加以下内容：

import type $script from 'scriptjs';

declare global {
  interface Window {
    $script: typeof $script;
  }
}

2. 调用时通过window对象调用即可：

window.$script('blabla.js', () => {
  // 加载完成逻辑
})

如果执行上述操作后仍然报错，可以检查tsconfig.json中的compilerOptions配置，确保包含以下项：

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

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