Typescript小白入门关于函数

逻辑X

已于 2024-06-13 10:41:40 修改

阅读量405

点赞数 3

文章标签： typescript ubuntu javascript

于 2024-06-13 10:39:23 首次发布

本文链接：https://blog.csdn.net/m0_62446426/article/details/139630091

版权

函数

一个函数的例子
函数中的可选参数和默认参数
剩余参数
关于`this`的一切
- this参数
重载

一个函数的例子

TS中函数包括有名字的函数和匿名函数。

// 有名字的函数
function add(x, y){
	return x + y;
}

// 匿名函数
let myAdd = function(x, y){ return x + y; };

TS中函数可以使用函数体外的变量。
你也可以为函数添加返回值类型，不过Typescript一般可以自己推断出返回值类型。

函数中的可选参数和默认参数

Typescript和Javascript在有些函数参数是否必须传入这方面有一些差别。
Typescript中每个参数都是必须的，编译器会检查用户是否为每个参数都传入了值。Javascript中每个参数都是可选的，可传可不传。
我们可以使用?在Typescript中实现可选参数的功能，使用?声明的可选参数必须放在必须参数的后面。声明有默认值的参数也可以起到可选参数的作用，而且有默认值的参数可以放在必须参数的前面。

function buildName(firstname: string, middlename = 'Ivan', lastname?: string): string {
	if(lastname){
		return firstname + ' ' + middlename + ' ' + lastname;
	}else{
		return firstname + ' ' + middlename;
	}
}

剩余参数

当你想要操作多个参数或者你不知道会有多少个参数传入函数时，在Js中你可以使用arguments访问所有的参数，在Ts中你可以使用...把所有参数传入一个变量中，这个变量被叫做剩余参数。剩余参数所表示的参数可以一个没有，也可以时任意个。编译器会根据你在...后给定的名字创建参数数组。

function bulidName(firstname: string, ...restname: string[]) {
	return firstname + ' ' + restname.join(' ');
}
let person = bulidName('Dane', 'Ivan', 'Lucas', 'Castro', 'DeHaan');

关于`this`的一切

在Js中this的值在函数调用时才会确定，灵活的同时比较难以理解。当对类中的方法被方法式地调用时，方法内的this通常指代这个对象；当类中的方法被非方法式地调用时，方法内地this通常指window。

this参数

你可以为函数提供一个显式的t his参数，这样它就会知道在函数调用时的this指代的是什么。

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),
    // 注意：函数现在显式指定其被调用者的类型必须为Deck
    createCardPicker: function(this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

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

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

当你对this在运行时动态确定的值产生疑惑时，不妨试试箭头函数。箭头函数是一种简洁的函数表达式的写法，它不会捕获this，箭头函数中的this始终指向它所在的上下文环境，而不是运行时动态确定的。

重载

Js是动态语言，根据参数的类型而返回不同的类型很常见，但是对于Ts，我们如果想实现近似的效果，则需要使用到重载。
可以为同一个函数提供多个函数定义来进行函数重载。定义函数重载时，一定要把最精确的那一个放在前面。

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // 检查我们是否正在使用对象/数组
    // 如果是的话，他们给了我们一副牌，我们来选牌
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // 否则就让他们选牌
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);