Web应用开发TypeScript使用详解

一、什么是 TypeScript

近年来，TypeScript 的应用热度持续攀升，这容易让人产生误解：众多开发者的青睐是否意味着它是一门全新的编程语言？

TypeScript 是由微软公司开发并维护的一门面向对象编程语言。它本质上是 JavaScript 的超集，涵盖了 JavaScript 的所有功能特性。

TypeScript 完全遵循面向对象编程（OOP）理念。借助 TypeScript 编译器（TSC），开发者可以将 .ts 文件编译转换为标准的 .js 文件，从而在浏览器或 Node.js 环境中运行。

简而言之，TypeScript 是 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。

二、TypeScript 简史

2010年，TypeScript 之父 Anders Hejlsberg 开始在微软内部研发 TypeScript，并于 2012年正式向公众发布了首个版本（TypeScript 0.8）。尽管发布后获得了全球范围内的广泛赞誉，但由于当时主流集成开发环境（IDE）的支持尚不完善，它并未立即被 JavaScript 社区大规模采用。

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

最新版本的 TypeScript（TypeScript 3.0）于 2018年 7月发布，开发者可以访问官方渠道下载最新版本。

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

• TypeScript 通过引入类型系统简化了 JavaScript 代码，使其更易于阅读和维护调试。
• TypeScript 是开源项目，拥有活跃的社区支持。
• 它为 JavaScript 开发提供了高效的工具支持，包括静态类型检查等最佳实践。
• TypeScript 使得代码结构更加清晰，便于阅读和理解。
• 使用 TypeScript 可以显著优化传统的 JavaScript 开发流程。
• TypeScript 不仅包含了 ES6（ECMAScript 6）的所有优势，还带来了更高的开发生产率。
• 通过代码类型检查，TypeScript 能够帮助开发者避免在编写 JavaScript 时常见的运行时错误。
• 它提供了强大的类型系统，包括对泛型的支持。
• 本质上，TypeScript 只是在 JavaScript 基础上增加了一些附加功能。
• TypeScript 代码可以编译为符合 ES5 和 ES6 标准的 JavaScript，从而兼容最新的浏览器环境。
• TypeScript 的设计与 ECMAScript 标准保持对齐，以确保良好的兼容性。
• TypeScript 以 JavaScript 开始，最终也编译为 JavaScript 运行。
• 它支持静态类型定义，有助于在编译阶段发现潜在问题。
• 使用 TypeScript 能够节省开发人员的调试和维护时间。
• TypeScript 是 ES3、ES5 和 ES6 的超集，兼容多种 ECMAScript 标准。

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。
• 默认情况下，类成员是公共的（public），但您也可以显式地为其添加 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"; }}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 或特定的运行时环境来执行。

以上就是 Web 应用开发 TypeScript 使用详解的详细内容，更多关于 Web 开发 TypeScript 使用的资料请关注本站其它相关文章！