typeScript基础快速了解

TypeScript是什么?简单来说,就是 更严谨 的 JavaScript

1.类型推断

let ab = '10' //ts根据我们写的内容判断为string类型
ab = 10 //在ts下会报错

2.类型注解

let ab: string //定义变量类型为string
ab = 'hzh'
ab = 10 //报错

3.类型断言

let numArr = [1,2,3]

const res = numArr.find(item => item > 2) 

res * 5 //'res' is possibly 'undefined' ,他判断res可能为undefined

let numArr = [1,2,3]

const res = numArr.find(item => item > 2) as number //告诉ts,返回的结果为 number

res * 5

4.基础类型和联合类型

let vl:string ='abc'
let v2:number =10
let v3:boolean = true
let nu:null =null
let un: undefined = undefined
let v4:string | null = null // 出现 string null 以外的类型报错
let v5: 1 | 2 | 3 = 2 //出现 1 2 3 以外的数字报错

5.数组 元组 枚举

//数组两种方式
let numArr: number[] = [1,2,3] 
let numArr2: Array[number] = [1,2,3]
//元组
let numArr3 :[number,string,string] = [1,'hzh','gjb'] //第一个为数字,第二个为字符串,第三个为字符串,而且必须要有三个数据,否则报错
let numArr3 :[number,string,string] = [1,'hzh'] //报错
//解决方法
let numArr3 :[number,string,string?] = [1,'hzh'] //正确  ? 表示 可选元素

//枚举
enum MyEnum {
    h,
    z,
    s
}
console.log(MyEnum.h) // 输出结果 0
console.log(MyEnum[0]) //输出结果 h

6.函数

function fn(a:string,b:string):string{  //fn():string 返回内容为 string类型
    return a + b
}
fn('h','zh')

function fn2(a:string,b:string):void{ // void 空
    
}
fn2('h','zh')

function fn3(a:string,b:string,c?:boolean,...rest:number[]):string{ //... 接受多余参数
    return a + b
}
fn3('h','zh',false,1,2,3)

7.接口

interface OBJ {
    name:string,
    age:number
}
//限制内容,类型
const obj : OBJ = {
    name:'hzh',
    age:20,
    gender:'男'//不能多写
    nama:'hzh'//拼写错误
    age:'18'//类型错误
}

8.类型别名

type MyUserName = string | number

let uname: MyUserName = 'hzh' //相当于 let uname: string | number = 'hzh'

9.泛型

function fn<T>(a:T,b:T) :T[] {
    return [a,b]
}

fn<number>(1,2) // <>里传递什么对应 T 就是什么类型 
//相当于
//function fn<number>(a:number,b:number) :number[] {
//    return [a,b]
//}
fn<string>('h','zh')
//相当于
//function fn<string>(a:string,b:string) :string[] {
//    return [a,b]
//}