中文官网
在中文网(官网也可以)点击立即试用->在浏览器中运行->在这里可以演示本篇博客内的内容
在这个页面右边点击js就是ts编译后的js内容,也可以点击左上角进行版本设置和一些配置,这个看个人意愿,我本人打开网站直接用了
类型推断
不加类型时,TS会进行类型推断,以默认赋值的值类型作为变量类型,如下默认赋值为String类型的数据,因此再次赋值为number类型则会报错
let str = 'abc'
str = 10
类型注解
相比较类型推断,类型注解本质就是给变量加个类型限制,这样就会把原有的默认的类型推断给覆盖使用我们定义的类型,如下
// let str: string = 'abc'// 或者可以初始不给值
let str :string
str = 'abc'
类型断言
如下代码
let arr = [1, 2, 3]
const result = arr.find(item => item > 2)
result * 5
这里可以发现我们得到的值肯定是3的,但是ts不知道,它会以为有undefined情况,所以这里报错了,因此这里我们要告诉ts这个会得到值并且是number类型的,因此代码改造如下:
let arr = [1, 2, 3]
const result = arr.find(item => item > 2) as number
let a = result * 5
console.log(a)
这样声明后就是相当于告诉ts返回值是number类型,这样就能过了ts的编译,但实际在运行中即使值为undefined也不会有问题
基础类型和联合类型
// 基础类型
let v0: any = 'abc' // 任意类型
let v1: string = 'abc'
let v2: number = 123
let v3: boolean = true
let nu: null = null
let un: undefined = undefined// 联合类型
let v4: string | null = null
v4 = '1234'
// v4 = 1234 // 报错,number类型不在联合类型范围之内let v5: 1 | 2 | 3 = 1
v5 = 2
v5 = 3
// v5 = 4 // 报错,4不在限制的联合类型范围之内
数组元祖和枚举
// 数组
let arr:number[] = [1, 2, 3] // 限制数组内容为数字类型
let arr2:Array<number> = [1, 2, 3] // 限制数组内容为数字类型let arr3:string[] = ['1', '2', '3'] // 限制数组内容为字符串类型
let arr4:Array<string> = ['1', '2', '3'] // 限制数组内容为字符串类型// 元组
// 元组可以限制数组类型和数组个数,类似数组结构
let t1: [number, string, number] = [1, '2', 3]
// t1[0] = '1' // 报错,元组第一个数值限定了number类型,不能赋值为string类型// ?设置可选
let t2: [number, string?, number?] = [1] // 这样后面两个值写不写都行,为可选值// 枚举
enum MyEnum {A,B,C
}
console.log('MyEnum.A',MyEnum.A) // 0
console.log('MyEnum[0]',MyEnum[0]) // "A"
函数
// 设置返回值类型为void代表不需要返回值
function MyFn1(a: number, b: number): void {console.log(a + b)
}// 设置返回值类型为number
function MyFn2(a: number, b: number): number {return a + b
}// 使用?设置可选参数,建议必选参数放到可选参数前面
function MyFn3(a: number, b?: number): number {// return a+b // 直接写a+b会报错,因为b是可选参数,ts不确定有没有传入bif (b) {return a + b}return a
}// 设置默认值
function MyFn4(a: number = 10): void {console.log(a) // 10
}
MyFn4()// 获取剩余参数
function MyFn5(a: number, ...rest: number[]): void {console.log('a',a) // 1console.log('rest',rest) // [2, 3, 4, 5]
}
MyFn5(1,2,3,4,5)
接口
interface Obj {name:string,age:number
}const obj:Obj = {name:'萧寂', age:10
}
类型别名
type MyUserName = string | numberlet a: MyUserName = 10 // a可以为number也可以为string
a = 'hello'
泛型
function myFn(a: number, b: number): number[] {return [a, b]
}// 如果上面的函数为通用型函数的话,就不能写死类型了,可以使用泛型传入类型,如下
function myFn1<T>(a: T, b: T): T[] {return [a, b]
}let m = myFn1<number>(1, 2)
console.log('m',m)
let m2 = myFn1<string>('A', 'B')
console.log('m2',m2)
)