TypeScript由浅入深学习

01.Typescript介绍、安装及开发工具

1、Typescript介绍

1. Typescript是由微软开发的一款开源的编程语言。
2. typeScript是javascript的超级，遵循最新的ES六、ES5规范。Typescript扩展了javascript的语法。
3. Typescript更像后端Java、C#这样的面向对象语言可让js开发大型企业项目。
4. 谷歌在大力支持Typescript的推广，谷歌的angular2.x就是基于Typescript语法。
5. 最新的Vue、React也能够集成TypeScript.

2、Typescript安装 编译

npm install -g typescript
tsc helloworld.ts

3、Typescript 开发工具 Vscode自动编译 .ts文件

1. 建立 tsconfig.json 文件 (tsc --init命令来生成配置文件)
2. 修改 tsconfig.json 文件中的 outDir 路径



3. 点击终端 运行任务 点击tsc:监视-tsconfig.json 而后就能够自动生产代码了。



4、Typescript 开发工具 HBuilder 自动编译.ts文件

1. 在最上方菜单栏，点击工具-插件安装；
2. 点击下方浏览Eclipse插件市场，搜索typescript插件进行安装
3. 安装完成后重启编译器，点击菜单栏工具-选项 选择编译ts文件
4. 在你的项目上右键点击-配置-Enable TypeScript Builder , 以后你再保存.ts文件时会自动再当前目录编译出对应的.js文件







在Compile all TypeScript files on build 进行勾选，而后肯定；

02.Typescript 数据类型

typescript中为了使编写的代码更规范，更有利于维护，增长了类型校验，在typescript中主要给咱们提供了如下数据类型:

• 布尔类型（boolean）
• 数字类型（number）
• 字符串类型(string)
• 数组类型（array）
• 元组类型（tuple）
• 枚举类型（enum）
• 任意类型（any）
• null 和 undefined
• void类型
• never类型

如下列举说明：

1、布尔类型（boolean）



2、数字类型（number



3、字符串类型(string)



4、数组类型（array）



5、元组类型（tuple）



6、枚举类型（enum）

随着计算机的不断普及，程序不只只用于数值计算，还更普遍地用于处理非数值的数据。 例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。 在其它程序设计语言中，通常用一个数值来表明某一状态，这种处理方法不直观，易读性差。 若是能在程序中用天然语言中有相应含义的单词来表明某一状态，则程序就很容易阅读和理解。 也就是说，事先考虑到某一变量可能取的值，尽可能用天然语言中含义清楚的单词来表示它的每个值， 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。

enum 枚举名{
            标识符[=整型常数],
            标识符[=整型常数],
            ...
            标识符[=整型常数],
        } ;
复制代码





7、任意类型（any）

8、null 和 undefined

9、void类型

typescript中的void表示没有任何类型，通常用于定义方法的时候方法没有返回值。

10、never类型

是其余类型 （包括 null 和 undefined）的子类型，表明从不会出现的值。这意味着声明never的变量只能被never类型所赋值。

03 Typescript中的函数

• 函数的定义
• 可选参数
• 默认参数
• 剩余参数
• 函数重载
• 箭头函数 es6
例子以下：

1、函数的定义



2、可选参数

先看下两种函数的传参方式：



没有返回值的方法：



es5里面方法的实参和形参能够不同，可是ts中必须同样，若是不同就须要配置可选参数：



注意：可选参数必须配置到最后面的参数!

3、默认参数



4、剩余参数



三点运算符，接受新传过来的值：



5、函数重载

java中方法的重载：重载指的是两个或者两个以上的同名函数，但他们的参数不同，这时会出现函数重载的状况 typescript中的重载：经过为同一个函数提供多个函数类型定义来试下多种功能的目的。





6、箭头函数 es6

this 指向的问题 箭头函数里里面的this指向上下文



04 Typescript中的类

1、普及一下ES5中的类：

1. 最简单的类



2. 构造函数和原型链里面增长方法
//构造函数增长方法：



//原型链里面增长方法：(原型链上的函数会被多个函数共享，构造函数不会)



3. 静态方法：



4. Es5里面的继承（对象冒充实现继承）



5. Es5里面的继承（原型链实现继承）



6. 原型链继承的 问题？？