起初我直接在初始页面上跟原来一样使用<script>引用了所需要的js文件

这种姿势是正确的，不要随便的把没有模块化的 js 代码添加到 webpack 的打包过程中，因为里面的 webpack 混淆功能可能会让你原来的 js 组件挂掉。

要把JS翻译成ts，要是我自己写的JS还好，那ui上的JS还是压缩过的，我咋改啊？

如果要在 angular 里面调用挂在 window 下面的插件A，你可以用下面的方式

interface window {
    pluginA:any;
}

那么怎么使用 jQuery 呢？首先安装 jQuery 的类型定义文件：

npm i -D @types/jquery

然后你应该就可以在 TS 里y面获得 jQuery 的智能感知了（如果你用的 vscode 的话），但是这个步骤并没有把 jQuery 打包进最后产生的 bundle，你还是需要像原来一样在页面通过 script 标签引入 jQuery。

如果没有智能感知出现的话，请把下面一段代码加入到 tsconfig.json 文件中：

"typeRoots": [
  "../node_modules/@types"
]

 那么怎么在 TS 里面像调用 TS 文件一样调用 jQuery 插件 B 呢？你需要加入下面的定义：

interface JQuery {
    pluginA(options:any):void;
}

然后你就在 TS 里面得到了对这个 jQuery 插件的智能感知。同样的这个操作并没有把这个插件打包进输出的内容，你还是需要像之前一样在页面上用 script 导入。

如果你发现上面的代码在运行时出错了，说xxx is undefined，特别是调用 jQuery 相关的方法时，这很有可能是 webpack 把你代码里面的 $ 给混淆了，这样的话，你需要在 webpack 里面做一点单独的配置：

module.exports = {
   // ... 省略了其他的配置
   externals: {
        jquery: 'jQuery'
    },
}

然后你就可以在 TS 里面：

import $ from 'jQuery'; // 这样可以避免 webpack 把 jQuery 混淆后找不到 jQuery 定义的问题，其他插件同理