day16
一、typescript
1.官网
2.简介
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
3.安装
npm i typescript -g
测试是否安装成功
tsc -v
4.编译
(1)手动编译
在指定目录下创建一个index.ts文件，在命令行中进入到这个目录下，执行命令
tsc index.ts
执行完成后会在当前目录下自动的生成一个同名.js文件
(2)自动编译-vscode
①创建一个名称为ts-demo的文件夹，并且在改文件夹下创建一个index.ts文件
②在命令行中，进入到ts-demo目录下，执行初始化命令
tsc --init
生成tsconfig配置文件
修改其中的outDir选项，把注释解开，改为./js
③在vscode的任务栏中找到 终端>运行生成任务>监视tsconfig.json
这样在ts文件中编写代码，就会自动在js目录下生成index.js文件了。
5.基本使用
(1)声明变量和变量的数据类型
ts的最大的特点是进行严谨的数据类型验证，要求我们在声明一个变量时，就定义该变量的数据类型，并且赋值的内容必须与指定的类型一致。
var 变量名 : 数据类型名称
var 变量名 : 数据类型名称 = 内容
(2)常见数据类型
string字符串、number数字、boolean布尔值、function函数、object对象、array数组...
(3)在ts声明数组
var 变量名称 : Array<数组元素的数据类型>;
示例代码：
var users : Array<string>;
// users = ['小王',true]//此时数组的成员数据类型如果不是字符串的话，就会出现警告
users = ['张飞','李四']
(4)ts新增的数据类型
①元组
元组是特殊的数组，元组的元素个数和数据类型都必须要预先设置好才能使用
var 变量名 : [ 第一个成员的数据类型，第N成员的数据类型 ]
示例代码：
var arr1 : [ string,number ];
// arr1 = [100,200]//第一个成员的数据类型不匹配
// arr1 = ['100',200,true]//目标只有两个成员，但是现在给了三个成员
arr1 = ['小飞',50]
②枚举
enum 变量名称 { 值1,值N }
示例代码：
enum weeks { '星期一' = 1,'星期二','星期三' }
console.log(weeks.星期三)
枚举中成员的默认下标是0
③any
任意类型
示例代码：
var info : any;
info = 10
info = '小张'
var arr2 : Array<any>
arr2 = ['张飞',100,true]
④void
void表示函数没有返回值
⑤never
表示那些永远不存在的数据类型
6.函数
ts中的函数和es6中有很多相同之处
(1)函数的声明
function 函数名称() : 函数的返回值类型{ ... }
示例代码：
function say() : void{
console.log('func say...')
}
say();
(2)函数的参数
①默认参数
function add(num1 :number,num2:number = 100 ) : number{
return num1 + num2;
}
// console.log(add(100,50));
console.log(add(60))//此时只传递了一个参数，第二个参数的默认值是100
console.log(add(60,60))//传递了两个参数，第二个参数的值是60
②可选参数
function dologin(username:string,password?:string) :void {
console.log(username)
console.log(password)
}
dologin('user01','1111')
// dologin('user01')//此时第二个参数是可选的，如果没有传递则是undefined
③剩余参数
function getStr(str1 : string,...str2:Array<any>) : void{
console.log(str1)
console.log(str2)
}
getStr('abc','def','ghj',100,true,{username:'小飞'})
第一个参数会被一个形参接收到，剩下所有的参数都会被第二个参数接收到，并把每一个实参作为数组的成员。
7.接口
interface，起约束作用，可以把声明好的接口当成数据类型使用。
示例代码：
//声明接口
interface Person{
name : string,
phone : number
}
//使用接口
var user1 : Person;
user1 = {
name : '小王',
phone : 15511112222
}
8.装饰器
装饰器是一种特殊的类型声明，它可以附加到类、属性、方法、参数上，用来修饰它们默认属性、行为。
装饰器可以说一个特殊的函数。
类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器它也是es7的标准特性之一
要使用装饰器的话，需要把tsconfig.json中的"experimentalDecorators": true启用
(1)类装饰器
在类的外部，改变类的行为（属性和方法）
①普通装饰器
声明装饰器
function logClass(target : any):void{
target.prototype.name = '千里马'
}
声明一个类，并调用装饰器
@logClass
class Animal{}
var d1 = new Animal()
console.log(d1)
在声明类之前，通过@符号和装饰器名称来调用装饰器
②装饰器工厂
如果需要在调用装饰器时，传递额外的参数来影响类的行为
function logClass(params:any){
return function(target:any){
target.prototype.name = params;
}
}
//使用装饰器（注入）
@logClass('汗血宝马')
class Animal{}
var d1 = new Animal();
console.log(d1)
(2)属性装饰器
声明属性装饰器
function logProperty(target:any,propertyName:any){
console.log(target,1111)
console.log(propertyName,2222)
}
使用装饰器
class Animal{
@logProperty
type:string = ''
}
属性装饰器的第一个参数是类的构造函数，第二个参数是属性名称
(3)方法装饰器
声明方法装饰器
function logAction(target:any,methodName:any,desc:any){
console.log(target,1111)
console.log(methodName,2222)
console.log(desc,3333)
}
调用方法装饰器
class Animal{
@logAction
eat():void{
console.log('eating...')
}
}
方法装饰器可以接收三个参数：
-
第一个参数是方法所在的类的构造函数
-
第二个参数是方法名称
-
第三个参数是方法权限的描述
(4)参数装饰器
声明装饰器
function logParams(target:any,methodName:any,paramsIndex:number){
console.log(target,1111)
console.log(methodName,2222)
console.log(paramsIndex,3333)
}
调用装饰器
class Animal{
eat(num:number,@logParams type:string):void{
console.log('eating...')
}
}
参数装饰器可以接收三个参数：
-
第一个参数是所在的类的构造函数
-
第二个参数是所在的函数名称
-
浙公网安备 33010602011771号