TS初次使用、ts类型、非空断言

ts类型申明

//参数a,b,函数返回值的类型都申明为number类型，如果传参中有非number类型的数据，则会显示红色波浪线
function sum(a: number, b: number): number {
    return a + b
}

console.log(sum(1, 9)); //10

//此处的a相当于const定义的，a的值永远为10
let a: 10;

//b的值只能为 'male'或者'female'
let b: 	'male' | 'female'

//b的值只能为 boolean类型或者string类型
let c: 	boolean | string

//any 表示任意类型，可以给d赋上任意类型的值(相当于对d关闭了TS的类型检测)
let d: any 
d = true
//等同于 let d

let s: string
s = d // d是any类型，s也变成了any类型（所以开发中尽量避免使用any）

//unknown 表示未知类型，也可以给d赋上任意类型的值
let e: unknown
e = 'hellow'

let s: string
//s = e // 语法检测不通过，因为s是string类型，e是unknown类型，它们类型不用，不允许直接赋值

//如果就是想把e的值赋给s，有两种解决办法
方法一：
if(typeof e === "string") {
	s  = e
}

方法二：
//使用类型断言
s = e as string
或者： 
s = <string>e

// void 用来表示空，以函数为例，就表示没有返回值
function fn(): void {
}

function fn(): void {
	//return undefined
	//return;
	//return null
}

函数一旦报错就立即终止，never用的很少

// {} 用来指定对象类型
let a: {name: string}
// a中有且只有name属性，且name值必须为string类型
a = {name: '猪八戒'}


let b: {name: string, age?: number}
// b中必须有name属性，且name值必须为string类型；age可有可无；
b = {name: '猪八戒'}
或者
b = {name: '猪八戒', age: 18}


let c: {name: string, [propName: string]: number}
// b中必须有name属性，且name值必须为string类型；剩余属性的个数，属性名不做要求，但是必须是number类型
c = {name: '猪八戒', haha: 12, xixi: 99}


// () => {} 用来指定函数对象类型
let d: (a: number, b: number)=>number
//函数d只接收两个number类型的参数，且返回值必须为number类型
d = function(n1: number, n2: number): number {
	return n1 + n2
}

// [] 用来指定对数组类型
let a: number[]
等同于
let a: Array<number>
a = [1,3,6,5,9]

//tuple是元组（ts新增），元组表示固定长度的数组
let a: [string, number]
//数组a中只有两个元素，第一个为string类型，第二个为number类型
a = [1, '2']

//enum是枚举（ts新增）
enum Gender{
	male,
	female
}

let a: {name: string, gender: Gender}
a = {name: '猪八戒', gender: Gender.male} 

// & 表示同时
let a: {name: string} & {age: number}
等同于
let a: {name: string, age: number}
//对象a中必须同时有name和age，且类型为指定类型
a = {name: '猪八戒', age: 18}

//类型的别名 
type myType = 1 | 2 | 3 
let a: myType
let c: mType
a = 1, c = 3 
// a、c的值为1或2或3，都行

! 表示非空断言

//正常情况下，通过document.getElementById获取元素，有可能获取不到，但是加上!非空断言就表示是一定能获取到的
let a = document.getElementById('main')!