Web应用开发TypeScript使用详解


Posted in Javascript onMay 25, 2022

一、什么是 TypeScript

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

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

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

Web应用开发TypeScript使用详解

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"; }}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; // 这样就可以了

Web应用开发TypeScript使用详解

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使用详解的详细内容!


Tags in this post...

Javascript 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
vue postcss-px2rem 自适应布局
May 15 #Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
May 11 #Javascript
JavaScript中reduce()的用法
May 11 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python实现图像拼接功能
2020/03/23 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
一组SQL面试题
2016/02/15 面试题
亲子活动总结
2014/04/26 职场文书
计划生育证明格式范本
2014/09/12 职场文书
《观潮》教学反思
2016/02/17 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
浅谈Python中的正则表达式
2021/06/28 Python