TypeScript 笔记（二）

1.元组

• 含义：限定了数组元素的数量，且规定了具体每个数组元素的数据类型的数据被称为元组

//元组
var e_list:[number,string] = [1,'2']

//创建元组类型
type EList = [number,string]
var e_list2:EList = [1,'2']

2.类型断言

• 要解决的问题：某些情况下，数据类型含有多种可能性时，必须保证每种可能的类型都能通过，否则就会弹出错误提示
• 编译通过的例子：字符串和数组都有length属性，所以编译通过

//输出参数的length属性值
function getLength(x:string|[]){
    //所以编译通过
    return x.length
}

• 编译不通过的例子：字符串有length属性，但是数字没有，编译不通过

//输出参数的length属性值
function getLength2(x:string|number){
    //编译不通过
    return x.length
}

• 解决办法：使用类型断言告诉ts，编译的时候按指定的类型来处理，语法 当前类型 as 指定的类型

//输出参数的length属性值
function getLength2(x:string|number){
    //告诉编译器，此次编译按string类型来处理
    return (x as string).length
}

• 实际例子：

//ts文件并不知道html文件中是否有a标签，所以他的值有2中类型：HTMLAnchorElement或者null
var linka =  document.querySelector('a')
//null类型没有href属性 所以会弹出错误提示
var href = linka.href

//告诉ts，不管html里面能不能找到div元素都按 HTMLDivElement 处理
var div = document.querySelector('div') as HTMLDivElement
//编译通过
var id = div.id

3.常量的类型

• 常量的类型就是常量的值本身

const str = "hello"
const num = 10

• 应用：利用常量的类型来限定函数传参的值

function changeDiretion(direction:'up'|'down'|'left'|'right'):void{
    console.log(direction)
}

//编译通过
changeDiretion('down')
//编译不通过
changeDiretion('top')