typescript：2、typescript语法（类型、逻辑控制、try-catch、变量定义、对象、函数）

typescript是javascript的超集，语法与javascript基本一致，在个别地方做了优化，比如说强类型方面。

typescript语法调试工具：
https://www.typescriptlang.org/play

1、typescript的类型

1.1、类型检查

typescript可以在定义变量时显式的指定类型，也可以不显式的指定类型


在进行变量赋值时，虽然可以转为js，但是typescript中会报错

1.2、literal类型

具有跟枚举一样的功能

1.3、any类型

any类型可以放弃代码的类型检查

1.4、undefined类型

let b: undefined = undefined
console.log(b)

1.5、枚举类型

枚举类型是typescript特有的，具体下来其实就是一个数字，只是对数字取了一个别名而已。

enum不指定值

enum HTTPStatus {
	OK,
	NOT_FOUND,
	INTERNAL_SERVER_ERROR,
}
function processHTTPStatus(s: HTTPStatus){
	//s = 0//可以执行，不会报错
	//s = 100//可以执行，不会报错
	if (s === HTTPStatus.OK){
		console.log('god response')
	}
	//console.log(s)//会输出数字
}
processHTTPStatus(HTTPStatus.INTERNAL_SERVER_ERROR)

enum指定值

enum HTTPStatus {
	OK = 200,
	NOT_FOUND = 404,
	INTERNAL_SERVER_ERROR = 500,
}
console.log(HTTPStatus.OK) //输出200

enum设置为字符串

enum TimingFunction {
	LINEAR = 'linear',
	EASE = 'ease',
	EASE_IN = 'ease-in',
}
function animation(timingFunction: | 'linear' | 'ease' | 'ease-in') {
	console.log(timingFunction)//输出字符串ease
}
animation(TimingFunction.EASE)

enum输出定义时声明的字符值

enum HTTPStatus {
	OK = 200,
	NOT_FOUND = 404,
}
function processHTTPStatus(s:HTTPStatus) {
	console.log(HTTPStatus[s])//输出字符串OK
}
processHTTPStatus(HTTPStatus.ok)

1.6、数组

Array.forEach( v => {  console.log(v)})//遍历数组
Array.filter()
Array.map( v => v*v )//对每一个数组的元素作用map方法传递的函数
Array.reduce( (result, value) => result + value)//每次将数组的值累加给result变量，最后返回result

let a: number[] = [1,2,3]
let b = [4,5,6]
let c: string[] = ['a','b']
let d: Array<number> = [1,2,3]
let d = [1,2,3,'a'] //类型为(string | number)[]

console.log(a.length, b.length, a[2], b[1])

判断数组是否为空

//该实例会输出 e is not empty
//需要使用array.length来判断数组是否为空
let e: number[] = []
if (e){
	console.log('e is not empty')
}else{
	console.log('e is empty')
}

增加删除元素

let a:number[] = []
a.push(1)//从数组尾部（右边）插入元素
a.push(2)
a.push(3)
a.pop()//从数组尾部（右边）弹出元素
a.push(4)

//从数组头部（左边）插入元素
a.unshift(1)
a.unshift(2)
a.shift() //从数组头部弹出元素
a.unshift()

const定义数组
下方代码可以运行，但是若后面给数组a重新赋值另一个数组的话就不行，

const a: number[] = []
a.push(1)//不会报错，因为此时数组a还是定义时的数组
a.push(2)

a = [1,2]//会报错，因为此时数组a相当于是另外一个数组了

数组截取

const a = [0,1,2,3,4,5,6,7]
console.log(a.slice(2,5))//[2,3,4]，因为slice函数包含开始的元素，不包含结尾的元素
console.log(a.slice(2))//从索引为2的开始一直截取到最后一个元素
console.log(a.slice(5,10))//不会越界，会取到从下标5开始到最后的元素

const a = [0,1,2,3,4,5,6,7]
//将索引为3的元素开始截取两个元素，同时在截取位置上填充10、11、12、13
const deleted = a.splice(3,2,10,11,12,13)

console.log(deleted)//[3,4]
console.log(a)//[0,1,2,10,11,12,13,5,6,7]

元素搜索

const a = [0,1,2,3,4,5,6,7]
console.log(a.indexOf(2))//找值为2的元素索引
console.log(a.indexOf(2,5))//从索引为5的元素开始找值为2的索引
console.log(a.lastIndexOf(2))//从末尾开始找

排序

const a = [0,1,2,3,4,5,6,7,10,11]
 a.sort//按照字符集来排序，不是用来排序数字的，只能排序字母，结果为：[0,1,10,11,2,3,4,5,6,7]

元组

const a = [1,2,3]
const [a1, a2, a3, a4] = a
console.log(a1, a2, a3, a4)//输出1, 2, 3, undefined

元素连接和元素拆分

console.log('a,b,c,1,2,3'.split(','))

console.log([1,2,3,4].join(','))

2、逻辑控制

typescript中所有判断都使用===、!==不使用==、!=，这样会对于代码的维护会好很多，避免掉很多的坑。
if else

function processHttpStatus(s: 200 | 404 | 500 | '200' | '404' | '500' ) {
	let statusNum = 0
	if(typeof s === 'string'){
		statusNum = parseInt(s)
	}else{
		statusNum = s
	}
	//let statusNum = typeof s === 'string' ? parseInt(s) : s
	
	if(statusNum === 200){
		console.log('ok')
	}else if(statusNum === 404){
		console.log('not found')
	}else if(statusNum === 500){
		console.log('internal server error')
	}
}
processHttpStatus('404')

switch

switch(no){
	case 200:
		console.log('200')
		break
	case 404:
		console.log('404')
		break
	default:
		console.log('not found')
		break
}

for

let sum = 0
for(let i = 0; i < 100; i++){
	sum += i
}
console.log(sum)

while

let sum = 0
let i = 1
while( i <= 100) {
	sum += i
	i ++
}
console.log(sum)

3、try-catch

for (let i = 0; i < 100; i++){
	try{
		sum += i
		if ( i % 17 === 0){
			throw `bad number ${i}`
		}
	}catch(err){
		console.log(err)
	}
}

4、变量定义

typescript沿用了javascript的全部语法，在该基础上做了一些扩展；
在定义变量时，不要用var定义，推荐使用let，同时对于后续不会改变的变量要尽量人为的使用const定义为常量。

5、对象类型

const emp1 = {
    name:{
        first: '三',
        last: '张',
    },
    gender: 'male' as 'male'|'female'|'other'|'unknown',
    'salary':8000,
    bonus: undefined as (number | undefined),//奖金
    performance: 3.5,
    badges: ['优秀员工', '迟到王'],
}
if(!emp1.bonus) {
    emp1.bonus = emp1.salary * emp1.performance
}

//对象转json
const s: string = JSON.stringify(emp1)
const emp2 = JSON.parse(s)
console.log(emp1 == emp2) //结果为false

给对象定义方法

const emp1 = {
    name: 'john',
    salary: 8000,
    bonus: undefined as (number | undefined),
    performance: 3.5,
    updaetBonus(){
        if( this.bonus){
            this.bonus = this.salary * emp1.bonus
        }
    },
    test(a:number, b:number):void{
        
    }
}
emp1.updaetBonus()

6、函数

函数默认值、可选参数、可变长参数

import { setupMaster } from "cluster";

/*
 *@param1 number a
 *@param2 number b
 *@param3 number c 可变变量，可以填也可以不填
 *@param4 number d 参数默认值，未填参数则值默认为0
 *@param5 可变长参数，在参数d之后不管填任意数量的参数都会存到参数e中
 调用例子：add3(1,2,3,4,5,6,7,8,9)
 const numbers = [5,6,7,8]
 add3(1,2,3,4,...numbers)//将数组作为参数传给可选参数列表
*/
function add3(a:number, b:number, c?:number,d:number=0,...e:number[]){
    let sum = 0
    for(let i = 0; i < e.length; i++){
        sum += e[i]
    }
    return sum
}
/**
 * c为可选参数，调用时可传可不传
 * 调用例子：
    add(1,2)   
    add(1,2,3)
 */
function add(a:number, b:number, c?:number){
    //return a + b + (c || 0)//等同下方的调用
    if(c){
        return a + b + c
    }else{
        return a + b
    }
}
/**
 * d为有默认值的参数，调用函数时若不传参数d，那么则参数d默认为0
 *  */
function add2(a:number, b:number, c?:number, d:number=0){
    if(c){
        return a + b + c
    }else{
        return a + b
    }
}

函数重载
函数重载不建议使用，但是typescript语法中提供了这个功能

function add(a:number, b:number):number
function add(a:number, b:number, ...e:number[]):number
function add(a:number, b:number, c?:number, d:number=0){
    return a + b
}

使用对象当参数
当参数过长时，使用对象当参数会少很多麻烦，不会导致参数过多不知道自己传到了第几个参数的问题

function sendRequest(params:{
    url:string,
    method: 'GET'|'POST'|'PUT',
    header: object,
    data?:string,
    requireAuth:boolean,
    retry: boolean,
    retryTimeout?:number,
}){

}
sendRequest({
    url:'https://www.test.com',
    method:'GET',
    header:{},
    requireAuth:true,
    retry:true,
})