typeScript常见问题
说说Typescript的优缺点？
优点：
1：快速简单，易于学习。
2：编译时提供错误检查， 在代码运行前就会进行错误提示。
3：支持所有的JS库。
4：支持ES6，提供了ES6所有优点和更高的生产力。
5：使用继承提供可重用性。
6：有助于代码结构。
7：通过定义模块来定义命名空间。
缺点：
1：需要长时间的来编译代码。
2：在使用第三方库时，需要有三方库的定义文件，并不是所有三方库都提供了定义文件，提供的定义文件是否准确也值得商榷。
Typescript有哪些基础类型？
1：number
2：string
3：boolean
4：Symbol
5：Array
6：Tuple(元组)
7：enum(枚举)
8：object
9：never
表示那些永不存在的值类型。如总是抛出异常或者根本不会有返回值的函数的返回值类型。
10：void
与any相反表示没有任何类型。函数没有返回值时用void。
11：null和undefined
它们是所有类型的子类型。当你指定structNullChecks时，它们只能赋值给void或者它们自己本身。
12：any
什么是TS接口？说说它有哪些特性？
TS的核心原则之一就是对值所具有的结构进行类型检查。
它有时被称为“鸭式辩型法”或“结构性子类型化”。
其作用就是为这些类型进行命名，或为你的代码或者三方代码定义契约。
特点：
1：定义对象、数组、函数、类等。
2：接口可以相互继承
3：接口可以继承类
4：可选属性与额外检查
说说接口和类型别名type的区别？
他们很相似，type可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。
区别一：它并不会真的创建一个新的名字，当你在编译器上将鼠标悬停在定义为该类型别名定义的变量上时返回的是该类型别名引用的对象。相反，接口会创建一个新名字 ，当你把鼠标悬停在该接口定义的变量上时返回的是该接口名。
区别二：类型别名不能extends和implements
区别三：对于元组，联合类型我们一般使用类型别名type。
说说什么Typescript中的泛型？作用是什么？
泛型代表的是泛指某一类型，更像是一个类型变量。由尖括号包裹。
主要作用是创建逻辑可复用的组件。
泛型可以作用在函数、类、接口上。
函数：
function greet(name: T) {}
类：
class createObj {
name: T
}
接口：
interface IF {
name: T
}
泛型还可以被约束，这样就是任意类型了。
interface TIF {
length: number
}
function test(params: T) {
console.log("=========>>>", params.length);
}
泛型约束之类型参数
function getPropoty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
什么是类型断言？
类型断言对运行没有什么影响，仅供编译器使用。
向编译器提供我们所希望的分析代码的提示。
表示断言的两种方式：
1：<类型>变量
2：变量 as 类型 （在tsx中只能使用这种方式）
什么是枚举？
枚举可以使我们定义一些带名字的常量，用于清晰的表达意图和创建一组有区别的用例。
枚举主要分为两类。一类是基于数字的，有自增长和反向映射的特性。一类是基于字符串的。
当然还有混合了这两种基础类型的枚举，我们叫做异构枚举。
webPack常见问题
请描述一下你对webpack的理解？
Webpack Webpack 是一个项目打包工具
可以压缩代码和图片，把浏览器识别不了的代码转化为能识别的，可以启动一个热加载服务器
Webpack 配置中用过哪些 Loader ？都有什么作用？
raw-loader：加载文件原始内容（utf-8）file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)source-map-loader：加载额外的 Source Map 文件，以方便断点调试image-loader：加载并且压缩图片文件json-loader加载 JSON 文件（默认包含）babel-loader：把 ES6 转换成 ES5ts-loader: 将 TypeScript 转换成 JavaScriptsass-loader：将SCSS/SASS代码转换成CSScss-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSSpostcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀vue-loader：加载 Vue.js 单文件组件cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里
Webpack 配置中用过哪些 Plugin ？都有什么作用？
define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)ignore-plugin：忽略部分文件html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)terser-webpack-plugin: 支持压缩 ES6 (Webpack4)webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)serviceworker-webpack-plugin：为网页应用增加离线缓存功能clean-webpack-plugin: 目录清理ModuleConcatenationPlugin: 开启 Scope Hoistingspeed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
Loader 和 Plugin 有什么区别？
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Webpack 层面如何性能优化？
优化loader配置
test、include、exclude三个配置项来缩⼩loader的处理范围
推荐include
include: path.resolve(__dirname, "./src"),
resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是 ['node_modules']。寻找第三方，默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录../node_modules找，再没有会去../../node_modules中找，以此类推，和Node.js的模块寻找机制很类似。
如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。
module.exports={
resolve:{
modules: [path.resolve(__dirname, "./node_modules")]
}
}
我们可以将⼀些JS⽂件存储在CDN上(减少Webpack打包出来的js体积)，在index.html中通过标签引⼊，
压缩HTML 借助html-webpack-plugin
压缩css 借助optimize-css-assets-webpack-plugin 借助cssnano
Webpack 热更新（HMR）是如何实现？
npm install webpack webpack-dev-server --save-dev
再设置一下 devServer
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
hot: true, // 重点关注
historyApiFallback: true,
compress: true
}
Webpack 打包中 Babel 插件?
大多数JavaScript Parser遵循 `estree` 规范，Babel 最初基于 `acorn` 项目(轻量级现代 JavaScript 解析器) Babel大概分为三大部分：
- 解析：将代码转换成 AST
- 词法分析：将代码(字符串)分割为token流，即语法单元成的数组
- 语法分析：分析token流(上面生成的数组)并生成 AST
- 转换：访问 AST 的节点进行变换操作生产新的 AST
source map是什么？生产环境怎么用？
`source map` 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。
当项目运行后，如果出现错误，我们可以利用 SourceMap 反向定位到源码位置
map文件只要不打开开发者工具，浏览器是不会加载的。
