无废话版的TypeScript(TS)教程可以满足日常项目使用

中文官网

在中文网(官网也可以)点击立即试用->在浏览器中运行->在这里可以演示本篇博客内的内容

在这个页面右边点击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不确定有没有传入b
    if (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) // 1
    console.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 | number

let 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)

收尾