Typescript 在 Angular 2 应该很了解它是什么。Typescript 其实也不是新东西了。写这篇文时版本是 1.8。Typescript 是微软的产品。
官网:https://www.typescriptlang.org/index.html
如果你用 Typescript,你就正在使用下一代的 Javascript,多酷!
Typescript 是现在 ES2015 的超集(superset),整合了下一代的 ECMAScript 新功能。例如,Angular 2 中的 Annotation decorator, @
这个符号。@Component
用来註釋 web component 的属性。
Typescript 也不是全新的 JavaScript 的语法。为什么不是全新?到 Typescript 的在线试用页面,黏贴你现在使用的 JS 代码,它一样可以跑。完全没问题。就如 ES2015 支持向後兼容性一样。
Typescript 跟他的名一样,注重于 Typing 语法的類型(Number,String,Array,Object……)
例子#
// javascript
function(user, income) {
// ...
}
// typescript
function(user: User, income: Number): void {
// ...
}
没註釋这个 fn,要了解 user 和 income 是什么类型的參數比较难。Code 少的项目可以读读,还可以了解。但是 App 有几百万行代码时,注解就比较变得重要。
Typescript 的语法,在参数、函数直接註釋是什么类型。代码变得容易明白它的作用。
另外一个错误例子#
function returnIncome(incoming: Number) {
return alert(incoming);
}
returnIncome("10k");
你可以黏贴这个错误代码到 Typescript Playground,在右边的输出框,点击 Run 就可以运行,游览器一样可以运行这个代码,弹出 “10k” 无误。
这简单的错误,Typescript 在文本編輯器中就会显示错误,也会解释 "10k"
是 String,不能当作 returnIncome 的参数 Number。
完整例子#
interface User {
name: string;
age: Number;
}
function getUserName(user: User): string {
return user.name;
}
var user1: User = {
name: "YOLO",
age: 10,
};
getUserName(user1);
就算 test coverage 100% 没问题,不代表你的代码是对的。
说#
我觉得尽量开始用 Typescript。很多的文本编辑器可以通过插件支持 Typescript。虽然开始是比较难接受,又要配置 typings、tsconfig。Typescript 可说是多一层代码质量保证。
更新:Atom 的插件 atom-typescript,這位作者也弄了個學習 Typescript 的教材