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});

看出這個函數必須接受這樣的一個點