🧑💻速览！TypeScript面试1-5题-HowieCong
1. 为什么要使用TypeScript？
1.1 增加了静态类型，在发布前可以规避一些问题
-
eg：TS如何在编译阶段就发现错误的？
-
Answer：JS中，如果一个函数期望接收一个数字作为参数，但实际传入了一个字符串，只有在运行时才会报错；在TS中，这种类型不匹配的错误在编译阶段就会被捕获，有助于减少线上运行时错误的出现概率。
//JS
function add(a,b){
return a + b;
}
add("1",2);// 12
//TS
function add(a: number,b: number):number{
return a + b;
}
add("1",2);// 编译阶段就会报错，提示参数类型不匹配
1.2 代码质量更好，可维护性和可读性提升
- eg：一个函数接受一个复杂对象作为参数，通过TS的类型定义，可以清除地看到这个对象包含哪些属性以及它们的类型，这比在JS中阅读代码逻辑来判断要高效得多
1.3 在大型项目的优势
-
TS的静态类型有助于建立统一的代码规范
-
根据类型定义来编写代码，减少因为类型理解不一致而导致的错误
-
代码审查中，类型定义可以作为一个参考标准，帮助审查者更快地发现潜在地问题
2.TypeScript相对于Javascript的优势是什么？
2.1 杜绝手误导致变量名写错
- eg：比如在一个复杂的条件判断或者循环嵌套中，写错了变量名，可能会导致程序逻辑出现错误，而这种错误在JS中挺难被发现；在TS中，编译器会检查变量的使用是否正确，包括变量名的拼写，可以有效避免这类问题
2.2 类型一定程度充当文档
2.2.1 结合工具自动生成API文档自动
-
通过TS的类型定义，使用像TSDoc这样的工具生成详细的文档，清晰地展示函数的参数类型、返回值类型以及功能描述等内容
-
对于开发和维护大型项目的API有帮助，可以及时更新文档并且保证文档与代码的类型定义同步
2.2.2 跨团队协作的作用
- 在跨团队协作或者开源项目，TS的类型定义，其他开发者在使用你的代码时，可以通过类型定义快速了解如何正确调用函数，传入什么类型的参数
2.2.3 IDE 自动填充/自动联想
- IDE 可以根据类型定义自动补全剩下的部分 => 减少了输入时间，避免了拼写错误
- IDE 可以根据类型定义自动联想出这个实例可以调用的方法和属性 => 方便
3. TypeScript中的 const 和 readonly 的区别？
const主要用于声明变量，防止变量的引用被修改；readonly主要用于类的属性，防止属性被修改
3.1 const关键字
-
const用于声明常量，一旦变量被声明，其值就不能被修改，主要用于声明基本类型或引用类型的引用地址不能被修改 -
适合用于整个程序生命周期都不应该改变的变量，确保变量的引用保持不变，有助于防止意外的重新赋值
3.2 readonly关键字
-
readonly主要用于修饰符的属性，表示该属性只能在对象初始化时被赋值，后续不能被修改。通常与类一起使用，为类的属性提供只读属性 -
readonly有助于确保对象属性在初始化后保持不变，防止意外修改类的属性，提高代码的可维护性和安全性
4. 枚举enum和常量枚举const enum的区别？ 接口interface和类型别名type的区别？
枚举在运行时保留，可包含计算成员，而常量枚举在编译时内联，仅允许常量成员，有助于减少代码大小。
接口主要用于对象和函数的形状定义，支持继承和声明合并，适合面向对象编程；类型别名更灵活，可以为任何类型创建别名，不能被继承或实现，适合复杂类型的组合和表达。
5. TypeScript 中 any 类型的作用是什么？
any类型在TS中，它允许变量可以是任意类型的值，为编译阶段不清楚当前的变量类型，值来自于动态的内容，比如用户输入，或者第三方代码库
5.1 处理动态内容
- 在某些场景下，我们可能无法知道用户输入的数据类型或者是第三方库没有提供对应的类型声明文件，使用
any类型可以避免编译错误
5.2 渐进式迁移
-
将JS项目迁移到TS项目的过程中，对于一些已经存在的JS代码，很难为其添加精确的类型声明
-
使用
any类型可以暂时为这些代码添加TS的”外衣“，使得它们可以在TS环境下运行；逐步为其添加精确的类型信息
function legacyFunction(param: any){
// 一些复杂的JS代码逻辑
}
5.3 与外部JS代码交互
-
与未使用TS编写的外部JS代码进行交互，
any类型可以让TS与这些代码无缝衔接 -
调用一个外部的JS函数，其参数和返回值的类型不确定，使用
any类型可以方便
decalre function externalFunction():any; //使用any类型声明其返回值
let result = externalFunction();
5.4 动态编程场景
- 在一些高度动态编程的场景中，比如
eval()函数或者动态属性访问时，any类型是必需的
let dynamicProperty: any = {};
let propertyName = 'someProperty';dynamicProperty[propertyName] = 'value';
5.5 注意
-
过度使用
any类型会破坏TS的优势，因为any类型让编辑器放弃对变量的类型检查，困难会导致一些运行时错误无法在编译阶段被发现 -
尽量将
any作为一种临时的解决方案，尽可能将any类型转为更精确的类型，这才能充分利用TS静态类型检查功能
❓其他
1. 疑问与作者HowieCong声明
-
如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong
-
声明：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！
2. 作者社交媒体/邮箱-HowieCong
-
HowieCong Mail : howiecong@163.com
