一、什么是 typescript
typescript 是近几年被火爆的应用了,这让大家产生了一个错觉:这么多的拥护者,难道typescript是一个新的语言?
typescript是微软公司开发和维护的一种面向对象的编程语言。它是javascript的超集,包含其所有元素。
typescript完全遵循oops的概念,在tsc(typescript编译器)的帮助下,我们可以将typescript代码(.ts文件)转换成javascript(.js文件)
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; // 这样就可以了
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使用的资料请关注其它相关文章!