TypeScript教程

dmr

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。


为什么会有TypeScript？

JavaScript 只是一个脚本语言，并非设计用于开发大型 Web 应用，JavaScript 没有提供类和模块的概念，而 TypeScript 扩展了 JavaScript 实现了这些特性。TypeScript 主要特点包括：
- TypeScript 是微软推出的开源语言，使用 Apache 授权协议
- TypeScript 是 JavaScript 的超集.
- TypeScript 增加了可选类型、类和模块
- TypeScript 可编译成可读的、标准的 JavaScript
- TypeScript 支持开发大规模 JavaScript 应用
- TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
- TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
- TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
- TypeScript 语法与 JScript .NET 相同
- TypeScript 易学易于理解


JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript优势：

解决痛点

TypeScript的设计解决了JavaScript的“痛点”：弱类型和没有命名空间；这导致程序很难模块化，不适合开发大型程序。

语法提示

编写程序时，编辑器将提供精准的语法提示，以帮助大家更方便地实践面向对象的编程。

容易上手

TypeScript的一个设计亮点，是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集，任何合法的JavaScript的语句在TypeScript下都是合法的，且沿用了JavaScript的使用习惯和惯例，可以说学习成本很低。

痛点的消除
编译时的强类型

TypeScript设计了一套类型机制来保证编译时的强类型判断。

简单举例：当你申明变量的类型后，其他类型的赋值将会引起编译错误。

var a:string;
a = false;
//此时a就会报错


有意思的是，类似于C#的var变量声明，TypeScript会对赋值的变量进行类型推断。

例如：
var a = 0;
a = "";
//此时a就会报错

模块化

利用TypeScript的关键词module，可以达到类似于命名空间的效果，而export可以控制是否被外部访问。

例如：

1. module Project{
   
2.    export module Core {
   
3.        function funA(){} //这里没有使用export修饰，表示不能被外界调用
   
4.        export function funB(){
   
5.               funA();
   
6.        }
   
7.    }
   
8. }
   
9. module Proiect.Core{
   
10.     export function funC(){
    
11.                 funA();//error
    
12.                 funB();
    
13. }
    
14. }
    
15. Project.Core.funA();//error
    
16. Project.Core.funB();
    
17. Project.Core.funC();

复制代码

从以上例子可以看出：

    module可以嵌套，访问时用.作分隔符，也可以用.作为分隔符来简写module的嵌套；
    只有带关键词export的才可以被外部访问；
    module可以合并，但是非export的对象在其他module下，即使是同一个名称，也不能被访问，如funcA()。

TypeScript基本语法

TypeScript的数据类型分为Boolean、Number、String、Array、Enum、Any、Void这七种类型。

Boolean类型

1. var a:boolean = true;//Boolean类型，编译通过
   
2. var b:boolean= 0;//Boolean类型，使用数字赋值，编译失败

复制代码

Number类型

1. var a : number =1;//整数
   
2. var b : number =2.1;//浮点数
   
3. var c : number =-12;//负数

复制代码

String类型

1. var a: string ="admin"";
   
2. var b: string ="Hello World!";
   
3. Var c: string ="false";
   
4. var d:string = false;//编译失败，赋值是Boolean类型

复制代码

Array类型

1. var users: string[] = ['Lily",“Tom',"LuCy',"Jetty"];
   
2. var list:Array<string> = ['Lily',"LuCV',"Jetty","Tom"];

复制代码

Enum枚举类

1. enum Color {Red, Green, Black};
   
2. var c: Color = Color.Red;alert(c);//默认值从0开始，这里会alert(0)
   
3. //可以手动指定值
   
4. enum Color1 {Red = 1, Green,Black};
   
5. var c1:Color1 = Color1.Red;
   
6. alert(c1);//这里会alert(1)
   
7. //根据值查找名称
   
8. enum Color2 {Red=1,Green=2,Black = 3};
   
9. var c2:string = Color2[2];
   
10. alert(c2);//alert(Green)

复制代码

Any不确定类型

1. var notSure:any = 4;
   
2. notSure = false;
   
3. notSure = "hello world"!;
   
4. anyList:any[] =["hello",1,false,["Lily","Lucy"]];
   
5. anyList = false;//anylist被定义为数组，不能是其他类型。数组中的值可以是any类型

复制代码

Void类型

1. function a(): void {
   
2. alert(123);
   
3. }
   

复制代码

类

基本语法

1. // 通过class创建类
   
2. class Animal {
   
3.     // 类的属性
   
4.     name: string;
   
5.     // 类的构造器
   
6.     constructor(name: string) {
   
7.         this.name = name;
   
8.     }
   
9.     // 类的方法
   
10.     sayHello():void{
    
11.         alert("hello animal:"+this.name);
    
12.     }
    
13. }
    
14. // 实例化类
    
15. var tom = new Animal("tom");
    
16. tom.sayHello();

复制代码

类的继承

1. // 通过class创建类
   
2. class Animal {
   
3.     // 类的属性
   
4.     name: string;
   
5. 
   
6.     // 类的构造器
   
7.     constructor(name: string) {
   
8.         this.name = name;
   
9.     }
   
10. 
    
11.     // 类的方法
    
12.     sayHello(): void {
    
13.         alert("hello animal:" + this.name);
    
14.     }
    
15. }
    
16. 
    
17. // 继承Animal
    
18. class Cat extends Animal {
    
19.     // 重写方法
    
20.     sayHello(): void {
    
21.         alert("hello cat:" + this.name);
    
22.     }
    
23. }
    
24. 
    
25. class Dog extends Animal {
    
26.     sayHello(): void {
    
27.         alert("hello dog:" + this.name);
    
28.     }
    
29. }

复制代码

修饰符

1. class Animal {
   
2.     private name: string; // 这里把name修饰符改为private
   
3. 
   
4.     constructor(name: string) {
   
5.         this.name = name;
   
6.     }
   
7. 
   
8.     sayHello(): void {
   
9.         alert("hello animal:" + this.name);
   
10.     }
    
11. }
    
12. 
    
13. class Cat extends Animal {
    
14.     sayHello(): void {
    
15.         alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    
16.     }
    
17. }
    
18. 
    
19. class Dog extends Animal {
    
20.     sayHello(): void {
    
21.         alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    
22.     }
    
23. }

复制代码

当把属性的修饰符改成私有时，子类继承以后便会报错。那么如何解决呢？后面再细说。

Get/Set访问器

1. class Animal {
   
2.     private name: string;
   
3. 
   
4.     get name(): string { //通过get和set解决子类不能引用父类private修饰的属性的问题
   
5.         return this.name;
   
6.     }
   
7. 
   
8.     set name(name: string) {
   
9.         this.name = name;
   
10.     }
    
11. 
    
12.     constructor(name: string) {
    
13.         this.name = name;
    
14.     }
    
15. 
    
16.     sayHello(): void {
    
17.         alert("hello animal:" + this.name);
    
18.     }
    
19. }
    
20. 
    
21. class Cat extends Animal {
    
22.     sayHello(): void {
    
23.         alert("hello cat:" + this.name);
    
24.     }
    
25. }
    
26. 
    
27. class Dog extends Animal {
    
28.     sayHello(): void {
    
29.         alert("hello dog:" + this.name);
    
30.     }
    
31. }

复制代码

静态属性

1. class Table {
   
2.     static width: Number = 100;
   
3.     static height: Number = 50
   
4. }
   
5. 
   
6. var width: Number = Table.width;

复制代码

接口
基本语法

1. interface Graphic {
   
2.     width: Number;
   
3.     height: Number;
   
4. }
   
5. 
   
6. class Square implements Graphic {
   
7.     width: Number;
   
8.     height: Number;
   
9. 
   
10.     constructor() {
    
11.         this.width = 100;
    
12.         this.height = 100;
    
13.     }
    
14. 
    
15.     constructor(width: Number, height: Number) {
    
16.         this.height = height;
    
17.         this.width = width;
    
18.     }
    
19. }

复制代码

继承接口

1. interface Graphic {
   
2.     width: Number;
   
3.     height: Number;
   
4. }
   
5. 
   
6. interface PenStroke {
   
7.     penWidth: Number;
   
8. }
   
9. 
   
10. interface Square extends Graphic, PenStroke {
    
11.     sideLength: number;
    
12. }

复制代码

模块
模块的作用

    防止命名空间冲突；
    将一个功能模块很容易的划分到不同文件中，更容易维护。

基本语法

1. module MyDemo{
   
2.     export class Animal {
   
3.         private name: string;
   
4. 
   
5.         get name(): string {
   
6.             return this.name;
   
7.         }
   
8. 
   
9.         set name(name: string) {
   
10.             this.name = name;
    
11.         }
    
12. 
    
13.         constructor(name: string) {
    
14.             this.name = name;
    
15.         }
    
16. 
    
17.         sayHello(): void {
    
18.             alert("hello animal:" + this.name);
    
19.         }
    
20.     }
    
21. 
    
22.     export class Cat extends Animal {
    
23.         sayHello(): void {
    
24.             alert("hello cat:" + this.name);
    
25.         }
    
26.     }
    
27. }

复制代码

别名

1. module Shapes {
   
2.     export module Polygons{
   
3.         export class Square{}
   
4.         export class Triangle{}
   
5.     }
   
6. }
   
7. 
   
8. import polygons = Shapes.Polygons;
   
9. var sq = new polygons.Square(); //类似于 new Shapes.Polygons.Square()
   
10. var sq1 = new Shapes.Polygons.Square();

复制代码

函数
基本语法

1. function add(x:number,y:number):number{
   
2.     return x+y;
   
3. }
   
4. 
   
5. var myAdd = function(x:number,y:number):number{
   
6.     return x+y;
   
7. }

复制代码

原文章：https://blog.csdn.net/twypx/article/details/80290806

来源：CSDN

微信扫一扫，分享更方便