开发Web应用为啥要使用TypeScript?

一、什么是 TypeScript

TypeScript 是近几年被火爆的应用了，这让大家产生了一个错觉：这么多的拥护者，难道TypeScript是一个新的语言？

TypeScript是微软公司开发和维护的一种面向对象的编程语言。它是JavaScript的超集，包含其所有元素。

TypeScript完全遵循OOPS的概念，在TSC（TypeScript编译器）的帮助下，我们可以将TypeScript代码（.ts文件）转换成JavaScript（.js文件）

1.jpg

TypeScript是JavaScript的超集

二、TypeScript 简史

2010年，Anders Hejlsberg（TypeScript的创建者）开始在微软开发TypeScript，并于2012年向公众发布了TypeScript的第一个版本（TypeScript 0.8）。尽管TypeScript的发布受到了全世界许多人的称赞，但是由于缺少主要ide的支持，它并没有被JavaScript社区主要采用。

TypeScript的第一个版本（TypeScript 0.8）于2012年10月发布。

最新版本的Typescript（Typescript 3.0）于2018年7月发布，您可以在这里下载最新版本！

三、为什么我们要使用TypeScript？

  • TypeScript简化了JavaScript代码，使其更易于阅读和调试。
  • TypeScript是开源的。
  • TypeScript为JavaScript ide和实践（如静态检查）提供了高效的开发工具。
  • TypeScript使代码更易于阅读和理解。
  • 使用TypeScript，我们可以大大改进普通的JavaScript。
  • TypeScript为我们提供了ES6（ECMAScript 6）的所有优点，以及更高的生产率。
  • TypeScript通过对代码进行类型检查，可以帮助我们避免在编写JavaScript时经常遇到的令人痛苦的错误。
  • 强大的类型系统，包括泛型。
  • TypeScript只不过是带有一些附加功能的JavaScript。
  • TypeScript代码可以按照ES5和ES6标准编译，以支持最新的浏览器。
  • 与ECMAScript对齐以实现兼容性。
  • 以JavaScript开始和结束。
  • 支持静态类型。
  • TypeScript将节省开发人员的时间。
  • TypeScript是ES3、ES5和ES6的超集。

TypeScript的附加功能

  • 具有可选参数的函数。
  • 使用REST参数的函数。
  • 泛型支持。
  • 模块支持。

四、大牛现身说法:

  • “我们喜欢TypeScript有很多方面……有了TypeScript，我们的几个团队成员说了类似的话，我现在实际上已经理解了我们自己的大部分代码！因为他们可以轻松地遍历它并更好地理解关系。我们已经通过TypeScript的检查发现了几个漏洞。“-Brad Green，Angular工程总监“
  • Ionic的主要目标之一是使应用程序开发尽可能快速和简单，工具支持TypeScript为我们 提供了自动完成、类型检查和源文档与之真正一致。”-Tim Lancina，工具开发人员–Ionic“
  • 在编写基于web或JavaScript的现代应用程序时，TypeScript是一个明智的选择。TypeScript经过仔细考虑的语言特性和功能，以及它不断改进的工具，带来了非常有成效的开发体验。”-Epic研究员Aaron Cornelius“
  • TypeScript帮助我们重用团队的知识并通过提供与C#相同的优秀开发经验来保持相同的团队速度……比普通JavaScript有了巨大的改进。”-Valio Stoychev，PM Lead–NativeScript“

五、你可能不知道的TypeScript顶级功能

1、面向对象程序设计

TypeScript包含一组非常好的面向对象编程（OOP）特性，这些特性有助于维护健壮和干净的代码；这提高了代码质量和可维护性。这些OOP特性使TypeScript代码非常整洁和有组织性。

例如:

class CustomerModel {
  customerId: number;
  companyName: string;
  contactName: string;
  country: string;
}
class CustomerOperation{
  addCustomer(customerData: CustomerModel) : number {
    // 添加用户
    let customerId = 5;// 保存后返回的ID
    return customerId;
  }
}

2、接口、泛型、继承和方法访问修饰符

TypeScript支持接口、泛型、继承和方法访问修饰符。接口是指定契约的好方法。泛型有助于提供编译时检查，继承使新对象具有现有对象的属性，访问修饰符控制类成员的可访问性。TypeScript有两个访问修饰符-public和private。默认情况下，成员是公共的，但您可以显式地向其添加公共或私有修饰符。

（1）接口

interface ITax {
  taxpayerId: string;
  calculateTax(): number;
}

class IncomeTax implements ITax {
  taxpayerId: string;
  calculateTax(): number {
    return 10000;
  }
}

class ServiceTax implements ITax {
  taxpayerId: string;
  calculateTax(): number {
    return 2000;
  }
}

（2）访问修饰符

class Customers{
  public companyname:string;
  private country:string;
}

显示一个公共变量和一个私有变量

（3）继承

class Employee{
  Firstname:string;
}

class Company extends Employee {
  Department:string;
  Role:string
  private AddEmployee(){
    this.Department="myDept";
    this.Role="Manager";
    this.FirstName="Test";
  }
}

（4）泛型

function identity<T> (arg: T): T {
  return arg; 
}
// 显示泛型实现的示例
let output = identity <string>("myString");
let outputl = identity <number> (23);

（5）强/静态类型

TypeScript不允许将值与不同的数据类型混合。如果违反了这些限制，就会抛出错误。因此，在声明变量时必须定义类型，并且除了在JavaScript中非常可能定义的类型之外，不能分配其他值。

例如:

let testnumber: number = 6;
testnumber = "myNumber"; // 这将引发错误
testnumber = 5; // 这样就可以了

3、编译时/静态类型检查

如果我们不遵循任何编程语言的正确语法和语义，那么编译器就会抛出编译时错误。在删除所有语法错误或调试编译时错误之前，它们不会让程序执行一行代码。TypeScript也是如此。

例如:

let isDone: boolean = false;
isDone = "345";  // 这将引发错误
isDone = true; // 这样就可以了

4、比JavaScript代码更少

TypeScript是JavaScript的包装器，因此可以使用帮助类来减少代码。Typescript中的代码更容易理解。

5、可读性

接口、类等为代码提供可读性。由于代码是用类和接口编写的，因此更有意义，也更易于阅读和理解。

举例:

class Greeter {
  private greeting: string;
  constructor (private message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

JavaScript 代码:

var Greeter = (function () {
  function Greeter(message) {
    this.greeting = message;
  }
  Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
  };
  return Greeter;
})();

6、兼容性

Typescript与JavaScript库兼容，比如 underscore.js，Lodash等。它们有许多内置且易于使用的功能，使开发更快。

7、提供可以将代码转换为JavaScript等效代码的“编译器”

TypeScript代码由纯JavaScript代码以及特定于TypeScript的某些关键字和构造组成。但是，编译TypeScript代码时，它会转换为普通的JavaScript。这意味着生成的JavaScript可以与任何支持JavaScript的浏览器一起使用。

8、支持模块

随着TypeScript代码基的增长，组织类和接口以获得更好的可维护性变得非常重要。TypeScript模块允许您这样做。模块是代码的容器，可以帮助您以整洁的方式组织代码。从概念上讲，您可能会发现它们类似于.NET命名空间。

例如:

module Company {
  class Employee {
  }

  class EmployeeHelper {
    targetEmployee: Employee;
  }

  export class Customer {
  }
}
var obj = new Company.Customer();

9、ES6 功能支持

Typescript是ES6的一个超集，所以ES6的所有特性它都有。另外还有一些特性，比如它支持通常称为lambda函数的箭头函数。ES6引入了一种稍微不同的语法来定义匿名函数，称为胖箭头(fat arrow)语法。

举例:

setTimeout(() => {
   console.log("setTimeout called!")
}, 1000);

10、在流行的框架中使用

TypeScript在过去几年里越来越流行。也许TypeScript流行的决定性时刻是Angular2正式转换到TS的时候，这是一个双赢的局面。

11、减少错误

它减少了诸如空处理、未定义等错误。强类型特性，通过适当的类型检查限制开发人员，来编写特定类型的代码。

12、函数重载

TypeScript允许您定义重载函数。这样，您可以根据参数调用函数的不同实现。但是，请记住，TypeScript函数重载有点奇怪，需要在实现期间进行类型检查。这种限制是由于TypeScript代码最终被编译成纯JavaScript，而JavaScript不支持真正意义上的函数重载概念。

例如:

class functionOverloading{
  addCustomer(custId: number);
  addCustomer(company: string);
  addCustomer(value: any) {
    if (value && typeof value == "number") {
      alert("First overload - " + value);
    }
    if (value && typeof value == "string") {
      alert("Second overload - " + value);
    }
  }
}

13、构造器

在TypeScript中定义的类可以有构造函数。构造函数通常通过将默认值设置为其属性来完成初始化对象的工作。构造函数也可以像函数一样重载。

例如:

export class SampleClass{
  private title: string; 
  constructor(public constructorexample: string){
    this.title = constructorexample; 
  }
}

14、调试

用TypeScript编写的代码很容易调试。

15、TypeScript只是JavaScript

TypeScript始于JavaScript，止于JavaScript。Typescript采用JavaScript中程序的基本构建块。为了执行的目的，所有类型脚本代码都转换为其JavaScript等效代码。

例如:

class Greeter {
  greeting: string;
  constructor (message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

JavaScript 代码:

var Greeter = (function () {
  function Greeter(message) {
    this.greeting = message;
  }
  Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
  };
  return Greeter;
})();

16、可移植性

TypeScript可以跨浏览器、设备和操作系统移植。它可以在JavaScript运行的任何环境中运行。与对应的脚本不同，TypeScript不需要专用的VM或特定的运行时环境来执行。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343