typescript学习：function函数，重载

本文内容如下

函数类型

如果你都有了答案，可以忽略本文章，或去TS学习地图寻找更多答案

---

函数

参数

参数：字符串类型，返回字符串
function sayHello(person:string):string{
    retrun 'hello' + person
}
sayHello('tom') //hello tom


参数：函数类型
function fn(callback: () => void): void {}


可选参数，加？变可选参，放在参数最后
function sayHello(name:string, age?:number):string | number{
    retrun name + age
}
sayHello('tom',18)


默认参数
function sayHello(name:string, age:number = 20):string | number{
    retrun name + age
}
sayHello('tom')


剩余参数
function count(...result:number[]):number{
    let sum = 0;
    for(let i = 0; i < result.length; i++){
        sum += result[i]
    }
    return sum
}
count(1,2,3,4)

function count(a:number,...result:number[]): number{
    let sum = a;
    for(let i = 0; i < result.length; i++){
        sum += result[i]
    }
    return sum
}
count(1,2,3,4)

返回值

void类型：表示函数没有任何返回值
function warn():void{
    alert('warning!!!')
}

有返回值：数字类型
function count():number{
    return 123
}

返回字符串或数字
function count():string | number {
	if(Math.random() > 0.5){
		return 123
	}
	return 'hello ts'
}

函数接收对象的注解

function add({ one, two }: { one: number, two: number }) {
    return one + two
}
const total = add({ one: 1, two: 2 })

---

this

// 写法一
let deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function () {
        return () => {    //将匿名函数改成箭头函数
            let pickedCard = Math.floor(Math.random() * 52) //0-51
            let pickedSuit = Math.floor(pickedCard / 13)   //0-3

            return {
                suit: this.suits[pickedSuit],
                card: pickedCard % 13 + 1 //0 - 12
            }
        }
    }
}

let cardPicker = deck.createCardPicker()
let pickedCard = cardPicker()

console.log(deck);

console.log('card: ' + pickedCard.card + ' of ' + pickedCard.suit)




// 写法二
interface Card {
    suit: string
    card: number
}

interface Deck {
    suits: string[]
    cards: number[]
    createCardPicker(this: Deck): () => Card
}


let deck: Deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function (this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52) //0-51
            let pickedSuit = Math.floor(pickedCard / 13)   //0-3

            return {
                suit: this.suits[pickedSuit],
                card: pickedCard % 13 + 1 //0 - 12
            }
        }
    }
}

let cardPicker = deck.createCardPicker()
let pickedCard = cardPicker()

console.log(deck);

console.log('card: ' + pickedCard.card + ' of ' + pickedCard.suit)

---

接口函数

// 通用函数类型：不限参数
type FnType = (...args: any) => any
let fn1: FnType = (name: string, age: number) => name + age


// 接口既函数，等价FnType，写多个函数是接口重载，不常用
interface FnTypeInter1 {
    (...args: any): any
}
let fn2: FnTypeInter1 = (name: string, age: number) => name + age


// 接口是对象的写法，可以写多个
interface FnTypeInter2 {
    eat: (...args: any) => any
}
let fn3: FnTypeInter2['eat'] = (name: string, age: number) => name + age

---

函数重载

支持同函数名，不同参数的函数同时存在，根据不同的参数，执行不一样的逻辑

多个重载签名 + 实现签名

真正执行的是重载签名，而不是实现签名

优势：

1. 结构分明
2. 各司其职，自动提示
3. 利于功能拓展

例子1

function getInfo(name:string):string
function getInfo(age:number):number
function getInfo(str:any):any{
    if(typeof str === 'string'){
        return '我叫' + str
    }
    return '我的年龄是' + str
}
getInfo(18)    //我的年龄是18
getInfo('tao') //我叫tao

例子2

type MessageType = 'image' | 'audio' | string;

type Message = {
    id: number;
    type: MessageType;
    sendMessage: string;
}

let message: Message[] = [
    { id: 1, type: 'image', sendMessage: 'hello' },
    { id: 2, type: 'audio', sendMessage: 'world' },
    { id: 3, type: 'image', sendMessage: 'react' },
    { id: 4, type: 'audio', sendMessage: 'typescript' },
]

// 非函数重载
function getMessage(value: number | MessageType): Message | Message[] {
    if (typeof value === 'number') {
        return message.find(m => m.id === value) || []
    }
    return message.filter(m => m.type === value) || []
}

// 非函数重载的问题：无法获取对象的属性
const m = getMessage(1)
console.log(m.sendMessage);      //报错，ts没有办法根据传递的值推导出执行的逻辑
const m = <Message>getMessage(1) //限定类型
console.log(m.sendMessage);      //正确


// 使用函数重载实现
function getMessage(id: number): Message
function getMessage(type: MessageType): Message[]
function getMessage(value: number | MessageType): Message | Message[] {
    if (typeof value === 'number') {
        return message.find(m => m.id === value) || []
    }
    return message.filter(m => m.type === value) || []
}

const m = getMessage(1)
console.log(m.sendMessage);


// 修改，增加功能
function getMessage(id: number): Message
function getMessage(type: MessageType, readRecordCount?: number): Message[]
function getMessage(value: number | MessageType, readRecordCount?: number): Message | Message[] {
    if (typeof value === 'number') {
        return message.find(m => m.id === value) || []
    }
    if (readRecordCount) {
        return message.filter(m => m.type === value).splice(0, readRecordCount)
    }
    return message.filter(m => m.type === value)
}

console.log(getMessage('image'));
console.log(getMessage('image', 2)); //只显示几条

方法重载

class ArrayList {
    constructor(public element: Array<object>) { }

    get(id: number) {
        return this.element[id]
    }

    show() {
        this.element.forEach(o => console.log(o))
    }

    remore(id: number): number
    remore(object: object): object
    remore(value: number | object): number | object {
        this.element = this.element.filter((ele, index) => {
            if (typeof value === 'number') {
                return value !== index
            } else {
                return value !== ele
            }
        })
        return value
    }
}


let stuOne = { username: 'li', age: 18 }
let stuTwo = { username: 'tao', age: 28 }
let stuThree = { username: 'joy', age: 38 }

let arr = new ArrayList([stuOne, stuTwo, stuThree])

let remoreIndex = arr.remore(0)
console.log('remoreIndex', remoreIndex);
arr.show()

let remoreObj = arr.remore(stuTwo)
console.log('remoreObj', remoreObj);
arr.show()

构造器重载

type SquareParam = {
    width?: number,
    height?: number,
    raduis?: number
}


class Square {
    public width: number;
    public height: number;

    constructor(width: number, height: number)
    constructor(pramaObj: SquareParam)
    // constructor(value: number | SquareParam) {  //报错 改成any
    constructor(pramaObjOrWidth: any, height?: number) {
        if (pramaObjOrWidth instanceof Object) {
            this.width = (pramaObjOrWidth as SquareParam).width || 0
            this.height = (pramaObjOrWidth as SquareParam).height || 0
        } else {
            this.width = pramaObjOrWidth;
            this.height = height || 0
        }
    }


    public getArea(): number {
        return this.height * this.width
    }
}

let square1 = new Square(40, 50)
console.log('square1', square1.getArea());

let squareObj: SquareParam = { width: 50, height: 90 }
let square2 = new Square(squareObj)
console.log('square2', square2.getArea());

---

学习更多

TS学习地图