Skip to main content

Typescript

Dev
Table of Contents

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 的教材