TypeScript 优势

demo.js

function demo(data) {
　　return Math.sqrt(data.x ** 2 + data.y ** 2);
}
demo();

 

demo.ts

function tsDemo(data:{x: number, y: number}) {
　　return Math.sqrt(data.x ** 2 + data.y ** 2);
}
tsDemo();

通用的一段代码，在 js 里面在需要传递参数的地方没传递参数，编辑器不会报错，在 ts 里面会报错 Expected 1 arguments, but got 0。改成 tsDemo({x: 1, y: 123}); 就不会了

 

这是 ts 的第一个优势，在编写代码的时候，就能快速定位一些潜在的问题。

 

ts 的第二个优势是更友好的编辑器自动提示，在 js 里面，data. 后面不会提示 x，在 ts 里面，data. 的时候会提示x,y

 

ts 的第三个优势是代码语义更清晰易懂，在编写代码，可以明确知道，data 里面应该包含 x 和 y 这两个属性，在阅读代码的时候可以读出一些潜在逻辑，这个函数里面要用到 x,y。js 里面完全不知道这里面要用什么参数，要深层次的阅读代码才知道

 

还有更容易理解的方式

interface Point {x: number, y: number}

function tsDemo(data: Point) {
　　return Math.sqrt(data.x ** 2 + data.y ** 2);
}

tsDemo({x: 1, y: 123});

看出这个函数必须接受这样的一个点