TypeScript学习笔记（一）

1.基础类型：

(1) boolean、number、string 类型

let num: number = 0;
let str: string = "1";
let str1: string = `${str}2`
let flag: boolean = false;

(2) undefined 和 null 类型

let u: undefined = undefined;

let n: null = null;

undefined 和 null 可以是任何类型的子类型，也就是说，你可以将 undefined 和 null 赋值给任何类型

let unum: number = undefined

let nstr: string = null

(3) any、know 和 void 类型

any 类型

当不清楚用什么类型时，可以使用 any 类型，这些值可能来源于动态内容，比如用户的输入和第三方引入库

let notSure: any = false;

notSure = "4";

notSure = 2;

notSure = undefined;

notSure = null;

也可以随便调用属性和方法

notSure.name

notSure.getName()

不建议使用 any，不然就丧失了 TS 的意义。

unknown 类型

不建议使用 any 类型，当不知道是什么类型时可以使用 unknown 类型，其定义和 any 有点像，但是使用unknown做任何事情都是不合法的。

举例：

function add(param:any){

    return param / 2

}

虽然能编译通过，但是并没有暴露出预期想要的效果，万一传入的 param 不是 number 类型，就达不到预期想要的效果

function add(param:unknown){

    return param / 2 // 因为不知道 param 类型，所以会标红报错

}

修改：

function add(param: unknown) {

    return param as number / 2

}

void 类型

void 类型与 any 类型相反，它表示没有任何类型，当没有任何返回值时，可以使用 void

function fn(): void {

    console.log("你好呀，欢迎学习ts")

}

(4) never 类型

never 类型表示永不存在值的类型

① 一个永不会有返回值的函数,即死循环

function fo():never{

    while(true){}

}

② 总会抛出错误的函数

function bar():never{

    throw new Error()

}

③ 由于 never 类型仅能被赋值给 never 类型，所以也可用于全面性检查

type Value = number | string | boolean

const processValue  = (value:Value) =>{

    if(typeof value === "number"){

        // 在这个判断中，value的类型被细化为number

        console.log(value)

    }else if(typeof value === "string"){

        // 在这个判断中，value的类型被细化为string

        console.log(value)

    }else{

        // 在这个分支中，value 的类型被细化为 boolean 类型，因为 value 不可能同时为 string 和 number

        // 此时，把 value 赋值给一个显示声明了 never 类型的变量 n 就会报错

        const n:never = value // 不能将类型“boolean”分配给类型“never”。

    }

}

(5) 数组类型

let list:number[] = []

list = [1,2,3,"4"] // 仅为 number 类型，故会报错

list.push("str") // push时类型对不上也会报错

(6) 元组类型

如果想要push不一样的类型可以使用元组类型

let arr:[number,string] = ["1","2"] // 写错类型会报错

let arr:[number,string] = [1,"2","3"] // 越界也会报错

push时不会报错越界错误

let arr:[number,string] = [1,"2"]

arr.push(4)

arr.push("str")

2.函数类型

TS定义函数类型需要定义输入参数类型和输出类型

输出类型也可以忽略,因为TS会根据返回语句自动推断返回类型

function add(x:number,y:number):number{

    return x + y

}

没有返回值时,默认返回void类型

function welcome():void{

    console.log("Welcome!")

}

(1) 函数表达式写法

let z = (x:number,y:number):number => {
    return x + y
}

(2) 可选参数

参数后面加个问号，代表该参数是可选的

function add(x:number,y:number,z?:number):number{
    return x + y
}


add(1,2)
add(1,2,3)

可选参数要放在函数入参的最后面,不然会报错

function add(x:number,y?:number,z:number):number{
    return x + y
}

(3) 默认参数

function add(x:number,y:number = 100){
    return x + y
}

add(100) // 200

默认参数可以不放在入参的最后面,但必须传入明确的 undefined 值来获得默认值

function add(x:number = 100,y:number):number{
    return x + y
}

add(100) // 报错,因为会判定只传了 x 而没传 y
add(undefined,100) // 200

(4) 函数赋值

在TS中函数不能随便赋值,会报错

let add2 = (x:number,y:number):number =>{
    return x + y
}

add2 = "123" // 不能将类型“string”分配给类型“(x: number, y: number) => number”。

可以用下面的方法将 add2 赋值给 add3

let add2 = (x: number, y: number): number => {
    return x + y
}

let add3 = add2 // 被解析为:let add3: (x: number, y: number) => number

(5) 函数重载

函数重载是指两个函数名称相同，但是参数个数或者参数类型不同。他的好处显而易见，不需要把相似功能的函数拆分成多个函数名称不同的函数。

① 不同参数类型

比如我们实现一个 add 函数，如果传入参数都是数字，就返回数字相加，如果传入参数都是字符串，就返回字符串拼接

function add(x: number[]): number

function add(x: string[]): string

function add(x: any[]): any {

    if (typeof x[0] === 'string') {
        return x.join()
    }

    if (typeof x[0] === 'number') {
        return x.reduce((acc, cur) => acc + cur)
    }

}

在 TS 中，实现函数重载，需要多次声明这个函数，前几次是函数定义，列出所有的情况，最后一次是函数实现，需要比较宽泛的类型，比如上面的例子就用到了 any。

② 不同参数个数

假设这个 add 函数接受更多的参数个数，比如还可以传入一个参数 y，如果传了y，就把 y 也加上或拼接上，就可以这么写

function add(x: number[]): number

function add(x: string[]): string

function add(x: number[], y: number[]): number

function add(x: string[], y: string[]): string

function add(x: any[], y?: any[]): any {

    if (Array.isArray(y) && typeof y[0] === 'number') {
        return x.reduce((acc, cur) => acc + cur) + y.reduce((acc, cur) => acc + cur)
    }

    if (Array.isArray(y) && typeof y[0] === 'string') {
        return x.join() + ',' + y.join()
    }

    if (typeof x[0] === 'string') {
        return x.join()
    }

    if (typeof x[0] === 'number') {
        return x.reduce((acc, cur) => acc + cur)
    }

}


console.log(add([1, 2, 3]))      // 6
console.log(add(['lin', '18']))  // 'lin,18'
console.log(add([1, 2, 3], [1, 2, 3])) // 12
console.log(add(['lin', '18'], ['man', 'handsome'])) // 'lin,18,man,handsome'

其实写起来挺麻烦的，后面了解泛型之后写起来会简洁一些，不必太纠结函数重载，知道有这个概念即可，平时一般用泛型来解决类似问题。

---

本文学习基于【1.9W字总结】