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});
看出这个函数必须接受这样的一个点