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

21
五月
2021

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.人类的本质就是真香

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员