前端面试问题——typescript的好处？举个实际例子

ts的好处？举个实际例子

前言

之前在一次面试过程中被问到typescript的特点，与javascript的区别？
主要方向是答出来了，及ts是一种强类型语言，可以看作js的超集，对各变量等都作了类型的规范与限制
然后面试官又问了一句，那你觉得它的好处是什么？你在项目中通过哪些例子感受到这些好处的？
哪些例子？当时脑子里想的只有当初刚接触并从js逐步转向ts时只觉得ts好烦，什么都要限制，还什么都报错，js就不会出现这么多报错，哪里有什么好处？反正我是没体会
最后只能呆呆的回了面试官一句想不起来

是的，之前一直无法体会ts的优点，只觉得每次用都给我拼命报错，烦都烦死了
直到今天在项目中出现了两个例子突然体会到了。。。。吸。。。真香

进入正题

Ts可以看作js的超集，主要相比于js，ts是一种强类型语言，针对变量等做了很多类型等的规范要求，规避了一些可能发生的错误

例如：
当我想在做两个变量的加减运算时，在js中很可能被当作字符串进行直接拼接

let frequency = (Number(start) + Number(interval) * index) / 1000000;
//@ts-ignore
frequency = _.isInteger(frequency) ? frequency : frequency.toFixed(1);

而在ts中，当我声明变量时，就确定它是一个数值类型，可以避免发生上述情况

let frequency = (Number(start) + Number(interval) * index) / 1000000;
frequency = _.isInteger(frequency) ? +frequency : +frequency.toFixed(1);

例子二：
当然，在ts中可以使用@ts-ignore来忽略ts提出的一些抗议，但这样做是不推荐的，因为这完全忽略了ts语言的所有检查

例如我没有声明过的变量被用到它也不会报错，等到了浏览器中才报一些莫名其妙的错，

查看代码，哼，笑死，根本就没有用到length属性，还在想是不是因为调用了数组的forEach方法才会报这个错，但想了想也没这可能

this.refsdata.bands.forEach(b => {
	// 通过type寻找相应的freqs
	this.refsdata.bandList = [
		//@ts-ignore
		...this.bandList,
		...this.onFindFreqs(b.freqs, entity.gtwtype)?.segments,
	];
});

找了很久的问题，然后尝试着把//@ts-ignore删除之后才抛出问题，原来是bandList是refsdata中的变量，就这样，问题最终才得到解决，👇由此就可以看出ts语言的优势来了

this.refsdata.bands.forEach(b => {
	// 通过type寻找相应的freqs
	this.refsdata.bandList = [
		...this.refsdata.bandList,
		...this.onFindFreqs(b.freqs, entity.gtwtype)?.segments,
	];
});

总结

1.少用//@ts-ignore
2.人类的本质就是真香