TypeScript由浅入深学习

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

一、Typescript介绍

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

二、Typescript安装 编译

npm install -g typescript
tsc helloworld.ts

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

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

点击终端 运行任务 点击tsc:监视-tsconfig.json 然后就可以自动生产代码了。

四、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类型

以下列举说明：

一、布尔类型（boolean）

二、数字类型（number

三、字符串类型(string)

四、数组类型（array）

五、元组类型（tuple）

六、枚举类型（enum）

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

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

七、任意类型（any）

八、null 和 undefined

九、void类型

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

十、never类型

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

03 Typescript中的函数

• 函数的定义
• 可选参数
• 默认参数
• 剩余参数
• 函数重载
• 箭头函数 es6

例子如下：

一、函数的定义

二、可选参数

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

没有返回值的方法：

es5里面方法的实参和形参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数：

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

三、默认参数

四、剩余参数

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

五、函数重载

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

六、箭头函数 es6

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

04 Typescript中的类

一、普及一下ES5中的类：

1. 最简单的类

构造函数和原型链里面增加方法 //构造函数增加方法：

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

静态方法：

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

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

原型链继承的 问题？？

转载于:https://juejin.im/post/5cfdff335188253cec306700