初入Angular，有几个问题，求前辈们给指点一下

Question

以前都是强行各种JQuery，bootstrap，以及各各种控件，不是职业前端，属于后端客串+兴趣。

最近开始学习Angular4，刚刚入坑。看了一周的Angular4教程

Angular 4.x 修仙之路

准备开始着手实践点东西。

但是一开始就遇到了问题，以前用过的UI框架都是依赖JQuery和Bootstrap写的。还有大量的框架JS和第三方JS插件。

起初我直接在初始页面上跟原来一样使用<script>引用了所需要的js文件，倒是项目没有报错。可以启动，隐约觉得这不是正确的姿势。

百度了一下，基本是说要把js注册到Angular-cli里的，也有说写.d.ts声明文件的。我用的是dotnet core创建的Angular模板，没有啥Angular-cli，这个要手动自己加么？

最大的问题是Js，不是说ts里不能直接引用JS么？要把JS翻译成ts，要是我自己写的JS还好，那ui上的JS还是压缩过的，我咋改啊？

尝试过了把js文件后缀改成ts，使用 tsc --declaration  来给生成声明文件，但是基本上是满篇的error。

 

难道换到angular以后，以前所有的前端代码都要重写么？请大神赐教。

Answer 1

不过不是项目要求，建议还是学习react、vue，市场需求更多一些。

Answer 2

 

起初我直接在初始页面上跟原来一样使用<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 定义的问题，其他插件同理