我的mac是安装了homebrew https://brew.sh/

安装方法: (需前置安装xcode)

nodejs默认安装了npm包管理工具, 但npm对天朝网络来说连接缓慢.可能需要科学的上网方法

或者,使用国内源代替

如果你使用npm 无问题, 可以跳过此步骤

如果没有安装cnpm, 之后的命令都要用npm代替cnpm

安装完后使用vue --version查看版本

国内就无奈的选择 y 吧

如果使用JavaScript 直接选择第二项就可以了

如果使用typescript 请选择第三项, 手动配置

因为上一步有自行选择vue版本 所以要做一下选择

安装完成:

我们可以根据提示进入工程目录,然后运行起来

4.选择要安装的功能框架

根据需求设置, 这里我就不用保存了

项目创建完成

可以看到和vue2.0基本没有区别, 有一些区别是因为我们使用typescript引起的

这里我们要看的第一个文件是: main.ts

webpack中使用echarts

在 webpack 的入口文件中直接引入第三方类库,向外全局暴露，以 jquery 插件使用为例

1.创建本地项目 webpack-demo

2.在 webpack-demo 的根目录下创建 package.json 文件

模块说明：

4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置

5.安装相关的 loader

6.安装jquery

7.在入口文件 app.js 中引入 jquery

8.给按钮绑定事件

9.运行命令

10.结果展示

通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例

1 ~ 5步同上

6.安装echarts

7.在webpack.config.js中进行配置

7.创建echart容器

8.初始化echarts

9.运行命令

10.结果展示

undefined

number:数值类型

string : 字符串类型

boolean: 布尔类型；

enum：枚举类型；

any : 任意类型(不建议用)；

void：空类型；

Array : 数组类型

Tuple : 元组类型；

Null ：空类型。

Undefined类型

在js中当你定义了一个变量，但没有给他赋予任何值的时候，他就是Undefined类型。这可能和你以前学的语言稍有不同，其他语言会有个类型的默认值。

我们现在来看一个例子，比如我们要声明一个年龄的变量age,我们要使用数值类型，也就是Number,但是我们不给他任何的值，我们只是在控制台给它输出，然后我们来看结果。

新建demo01.ts文件，下入下面代码：

//声明数值类型的变量age，但不予赋值

var age:number

console.log(age)

1

2

3

写完后保存代码，进行运行任务，然后生成demo01.js，在终端中使用node demo01.js来进行查看运行结果。控制台输出了undefined,跟我们预想的一模一样。

Number类型

在TypeScript中，所有的数字都是Number类型，这不分是整数还是小数。比如下面我们声明一个年龄是18岁，身高是178.5厘米。

新建一个文件demo01_1.ts文件，写入下面代码：

var age:number = 18

var stature:number = 178.5

console.log(age)

console.log(stature)

1

2

3

4

然后执行转换，查看结果，我们可以在控制台看到结果已经顺利输出，没有任何意外。

在TypeScrip中有几种特殊的Number类型 我们需要额外注意一下：

NaN：它是Not a Number 的简写，意思就是不是一个数值。如果一个计算结果或者函数的返回值本应该是数值，但是由于种种原因，他不是数字。出现这种状况不会报错，而是把它的结果看成了NaN。（这就好比我们去泰国外，找了一个大长腿、瓜子脸、水蛇腰的女神。房也开好了，澡也洗完了，发现跟我们的性别统一，我们只能吃个哑巴亏，你绝不会声张）

Infinity :正无穷大。

-Infinity：负无穷大。

string类型

由单引号或者双引号括起来的一串字符就是字符串。比如"哈哈", ‘呵呵’。看下面的代码：

demo01_2.ts

var hh: string = "哈哈"

console.log(hh)

1

2

这时候控制图就会乖乖的输出技术胖 哈哈

boolean布尔类型

做任何业务逻辑判断都要有布尔类型的参与，通过对与错的判断是最直观的逻辑处理。boolean类型只有两种值，true和false。

var b:boolean = true

var c:boolean = false

1

2

enum 类型

这个世界有很多值是多个并且是固定的，比如：

世界上人的类型：男人、女人、中性

一年的季节：春、夏、秋、冬 ，有四个结果。

这种变量的结果是固定的几个数据时，就是我们使用枚举类型的最好时机：

demo01_3.ts

enum REN{ nan , nv ,yao}

console.log(REN.yao) //返回了2，这是索引index，跟数组很想。

1

2

如果我们想给这些枚举赋值，可以直接使用=,来进行赋值。

enum REN{

nan = '男',

nv = '女',

yao= '妖'

}

console.log(REN.yao) //返回了妖 这个字

1

2

3

4

5

6

any类型

一个写惯了前端的人，有时候不自觉的就分不清类型了。这是个不好的习惯，也是前端的痛，就因为这个原因，JavaScript也多次被人诟病说大型项目不适合用JavaScript。但是习惯一旦养成，改是需要时间和磨练的。TypeScript友好的为我们提供了一种特殊的类型any，比如我们在程序中不断变化着类型，又不想让程序报错，这时候就可以使用any了。

var t:any =10

t = "hhhh"

t = true

console.log(t)

1

2

3

4

Null类型：

与 Undefined 类似，都代表空。Null 代表是引用类型为空。意义不大，但是有用。后续学习中会使用到。

引用类型-数组

初始化数组的两种方法:

声明数组跟声明一个普通变量是一样的，都是通过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。

1. 声明数组的2种方法

声明数组跟声明一个普通变量是一样的，都是通过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。

let arr1: number[] = [1, 2, 3, 4]

let arr2:Array<number>= [4, 4, 5]

1

2

3

2. 给数组赋值

数组是存储大量数据的集合，声明数组之后，需要给数组存储数据。这时候有两种方法：

字面量赋值法：直接使用“[ ]”对数组进行赋值。

构造函数赋值法：

字面量赋值：

//定义一个空数组，数组容量为0

let arr1:number[] = []

//定义一个数组时，直接给数组赋值

let arr2:number[] = [1,2,3,4,5]

//定义数组 的同事给数组赋值

let arr3:Array<string>= ['hh','哈哈','呵呵']

let arr4:Array<boolean>= [ true,false,false]

1

2

3

4

5

6

7

需要注意的是，在TypeScript中指定数据类型的数组只能存储同一类型的数组元素。

//报错！ 必须存储number类型的数据

let arr5:number[] = [1,2,true]

1

2

构造函数赋值：

在 TypeScript 中使用 Array 这个引用类型来表示数组的，那么每一个数组都是 Array 类型的实例。那么，我们在创建数组的时候也可以使用构造函数来进行赋值。

let arr1:number[] = new Array()

let ara2:number[] = new Array(1,2,3,4,5)

let arr3:Array<string>= new Array('hh','哈哈','呵呵')

let arr4:Array<boolean>= new Array(true,false,false)

1

2

3

4

这两种方法，都可以给数组进行赋值，在实际开发中使用哪种方法都是可以的。

认识元组，一种特殊的数组

元组是一种特殊的数组，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为string和number类型的元组。元组在实际开发中使用的非常少，大家了解一下就可以了，不做过多介绍。

//声明一个元祖类型

let x : [string,number]

//正确的初始化

x = ['hello',10]

//错误的初始化方法

x = [10,'hello']

1

2

3

4

5

6

TypeScript中其它的数组知识跟JavaScript中的一样，我再这里就不磨磨唧唧的浪费大家时间了。感兴趣的可以写一下JS中的数组方法。

————————————————