正文
一、什么是 TypeScript？
TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript的语法。
TypeScript是属于编程语言，静态类型和面向对象。
TypeScript遵循最新的ES6、ES5规范，它扩展了JS的语法。
TypeScript可以让JS开发大型企业应用，即适用于大型应用 或 多人协作
最新的Vue、React也可以集成TypeScript
谷歌也在大力支持TypeScript的推广，谷歌的angular2.x就是基于TypeScript语法
二、TS和JS的对比
TS是应用程序
TS是JS超集 (less sass---->css) (ts---->js)
跨平台 + 开源
开始于JS,终止于JS
重用JS，甚至可以引入js流行的库 echats
TypeScript 有 类 接口 模块
三、TypeScript小课堂
注意：安装TypeScript环境之前要安装node环境
01 TypeScript开发环境的构建
安装node，安装完之后在cmd查询 node npm版本号
显示版本号则说明安装成功
在终端输入
npm install typescript -g
安装成功之后输入如下命令，查看版本号
tsc --version
在终端输入如下命令进行初始化
npm init -y
成功之后会出现package.json文件。-y表示默认
package.json不需要修改什么，因为我们接下来主要是学习语法
接下来输入如下命令，会生成tsconfig.json文件。
tsc --init
这个文件是我们写ts文件之后如何编译成为js文件的一个配置文件
接下来我们在终端输入以下命令
npm install @types/node --dev-save
它是在我们的开发环境中使用的，它主要解决的是模块的声明文件问题
安装成功之后就可以查找其版本号啦
02 开启我们的helloWorld.ts
以上的准备工作弄好之后，我们就可以开始学习我们的ts啦
新建一个文件helloWorld.ts，就开始在里面写我们的ts代码啦
// ts支持强类型，所以我们声明一个变量a可以给它加上类型 var a:string = "HelloWorld" console.log(a)
那下一步是什么呢？
就是我们的ts文件要转成js文件
在终端那里选择运行生成文件，选择tsc：构建-tsconfig.json这个选项
注意
路径里面最好不要有中文路径
如果遇到以下报错信息，可以使用管理员身份运行 PowerShell， 然后输入 set-executionpolicy remotesigned，然后选择yes
这样就成功解决这个问题啦，我们继续往下学
构建成功之后它会自动生成一个js文件,它是严格模式，是在tsconfig.json配置的
有了这个文件，我们就可以在我们的终端输入以下命令运行文件
node helloWorld.js
可以发现被成功打印出来了~
03 TS变量类型那些事
下面我们抽取一些类型来实践一下吧
undefined
我们新建一个文件（demo003.ts）开始我们的测试
var age:number console.log(age)
和上面说的一样，在终端那里选择运行生成文件，选择tsc：构建-tsconfig.json这个选项来生成我们的demo003.js文件
然后我们运行我们的文件
或者在终端输入以下命令行，实现自动构建
npm tac watch
我们会发现输出了undefined
这个时候如果我们给age赋值，运行之后就会显示出来啦。
var age:number = 18;
number
我们的number不仅支持整 数，还支持浮点型数字
var age:number = 18; var height:number = 165; console.log(age) console.log(height)
NaN(No a Number)
var age:number = NaN var height:number = 165; console.log(age) console.log(height)
string
单引号和双引号都是可以的
var hls:string = "hls喜欢 迈克杰克逊" console.log(hls) console.log('-------------') var cola:string = 'cola也 喜欢 迈克杰克逊' console.log(cola)
boolean
(ts中布尔值只有true和false两个)
(0和null在ts中不表示false了)
var b:boolean = true var c:boolean = false console.log(b) console.log('-------------') console.log(c)
enum 枚举类型
枚举类型 enum 比如：人有男人，女人，中性 四季有春夏秋冬
enum REN{man,woman,neutral} console.log(REN.man)
这里打印出来的是下标，第一个是0（也就是说从零开始）
如果我们要打印出来内容，应该怎么操作呢？
console.log('-------------') enum REN{man='男人',woman='女人',neutral='妖'} console.log(REN.man) 用等于赋值过去即可（注意这里要用=）
any 万能类型
它能够存放任意类型，并且成功输出
var t:any =10 t=true t='hls' console.log('-------------') console.log(t)
ts和js不同：ts需要声明我们的变量类型
04 Ts函数
函数定义：
把功能相近的需求封装成一个独立的代码块
然后每次传入不同的变量
变量不同，所以呈现的结果就不同
function searchXiaoJieJie(age:number):string { return '找到了'+age +'岁的小姐姐' } var age:number = 18; var result:string=searchXiaoJieJie(age) console.log(result)
在这里我们只需要手动改变age的值就可以了
要注意的地方
必须用function这个关键字来定义一个函数
函数名与变量名是一样的(都需要遵循加类型的规则)
函数的参数可有可无
如果参数有多个，用逗号隔开
形参(形式上的参数)和实参(真实传递的参数)
可选参数的函数
function searchXiaoJie Jie(age:number,status?:string):string { let yy:string='' yy='找到了'+age+'岁' if(status!=undefined){ yy = yy +status } return yy+'的小姐姐' } var result:string=searchXiaoJieJie(22,'大长腿') console.log(result)
有默认参数的函数
function searchXiaoJieJie(age:number=18,status:string='小蛮腰'):string { let yy:string='' yy='找到了'+age+'岁' if(status!=undefined){ yy = yy +status } return yy+'的小姐姐' } var result:string=searchXiaoJieJie() console.log(result)
如果手动设置传入也是可以的
var result:string=searchXiaoJieJie(22,'大长腿') console.log(result)
当我们的需求是不确定的，我们可以这样写
function searchXiaoJieJie(...xuqiu:string[]):string { let yy:string='找到了' for(let i=0;i<xuqiu.length-1;i++) { yy = yy +xuqiu[i] if(i<xuqiu.length){ yy = yy + '、' } } yy=yy+'的小姐姐' return yy } var result:string=searchXiaoJieJie('22岁','大长腿','瓜子脸','小蛮腰') console.log(result)
05 函数的三种定义方式
函数声明法(常用)
function add(n1:number,n2:number):number{ return n1+n2 } console.log(add(1,2))
函数表达式法
先声明一个变量，把这个函数赋值给变量
这个变量就是函数名
通过变量名就可以调用这个函数
注意：定义之后要调用，否则会报错
var add = function(n1:num ber,n 2:number):number{ return n1+n2 } console.log(add(1,3))
箭头函数完全支持ES6
利于回调
函数都是有作用域的
var add=(n1:number,n2:number):number=>{ return n1+n2 //this } console.log(add(3,5)
