typescript怎么调试-Web应用开发TypeScript详解

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

目录 4. 大牛的个人经历： 5. 你可能不知道的 TypeScript 顶级功能

1.什么是 TypeScript

TypeScript 近年来被广泛使用，这让你产生一种错觉：有这么多支持者，TypeScript 是一门新语言吗？

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

TypeScript完全符合OOPS的理念，借助TSC（TypeScript Compiler），我们可以将TypeScript代码（.ts文件）转换为JavaScript（.js文件）

TypeScript 是 JavaScript 的超集

2. TypeScript 简史

2010 年，Anders Hejlsberg（TypeScript 的创建者）开始在 Google 开发 TypeScripttypescript怎么调试，并于 2012 年向公众发布了 TypeScript 的第一个版本（TypeScript 0.8）。由于缺乏主流 IDE 的支持，它被 JavaScript 社区广泛采用。

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

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

3. 为什么我们使用TypeScript？ TypeScript 的附加功能 4. 大牛个人经历： 5. 你可能不知道的 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 支持套接字、泛型、继承和方法访问修饰符。

(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 (arg: T): T {
  return arg; 
}
// 显示泛型实现的示例
let output = identity ("myString");
let outputl = identity  (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 与 underscore.js、Lodash 等 JavaScript 库兼容。它们具有许多开箱即用且易于使用的功能typescript怎么调试，使开发速度更快。

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 引入了一种稍微不同的语法来定义匿名函数，称为粗箭头语法。

例子：

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 程序的基本构建块。 出于执行目的，所有 TypeScript 代码都会转换为其等效的 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 不需要专用的虚拟机或特定的运行时环境来执行。

以上就是TypeScript在Web应用开发中的使用解读的详细内容。 更多关于TypeScript在Web开发中的使用，请关注云海天教程其他相关文章！