鸿蒙ArkTS语言快速入门-TS（三）

相关文章快速入口：鸿蒙ArkTS语言快速入门-TS（二）

TS入门学习第三篇

函数

和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式，不论是定义一系列API函数还是只使用一次的函数。

普通函数

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

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

定义类型的函数

// 有名函数：给变量设置为number类型
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数：给变量设置为number类型
let myAdd = function (x: number, y: number): number {
  return x + y;
};

完整的类型函数是这样的

let myAdd: (x:number, y:number) => number =
    function(x: number, y: number): number { return x + y; };

未定义类型的函数

// 给函数类型设置为any类型，为任意类型
function add(x: number, y: number): any{
  return x + y;
}

可选参数和默认参数

JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 在TypeScript里我们可以在参数名旁使用?实现可选参数的功能。 比如，我们想让last name是可选的：

let result1 = buildName("Bob");  // works correctly now
let result3 = buildName("Bob", "Adams");  // ah, just right

在TypeScript里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例，把last name的默认值设置为"Smith"。

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

let result2 = buildName("Bob", undefined);       // 仍然有效，还返回“Bob Smith”
let result4 = buildName("Bob", "Adams");         // 正确

剩余参数

剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 可以使用省略号（ …）进行定义

function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}

let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

箭头函数

ES6版本的TypeScript提供了一个箭头函数，它是定义匿名函数的简写语法，用于函数表达式，它省略了function关键字。箭头函数的定义如下。
其中，括号内是函数的入参，可以有0到多个参数，箭头后是函数的代码块。我们可以将这个箭头函数赋值给一个变量，如下所示：

let arrowFun = ( [param1, parma2,…param n] )=> {
    // 代码块
}
//如何要主动调用这个箭头函数，可以按如下方法去调用：
arrowFun(param1, parma2,…param n)

接下来我们看看如何将我们熟悉的函数定义方式转换为箭头函数。

function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}
//箭头变换
let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

this

由于TypeScript是JavaScript的超集，TypeScript程序员也需要弄清this工作机制并且当有bug的时候能够找出错误所在。
this作用域有点绕，但是很重要。
顶级的非方法式调用会将this视为window。 （注意：在严格模式下，this为undefined而不是window）。

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return function() {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
// 这里的this是window
            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

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

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

箭头函数能保存函数创建时的this值，而不是调用时的值。

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        // 注意：下面的行现在是一个箭头函数，允许我们在此处捕获“this”
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
  // 这里的this是deck对象的
            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

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

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

函数重载

方法有不同个数的参数用重载

function func (a: number): number
function func (a: number, b: number): number

方法的参数是不同类型的用函数

function func (a: number): number
function func (a: string): number
//我们使用以下方式进行替代
function func (a: number | string): number

方法的返回值不同的用重载

function test(a: number, b: string): void;
function test(a: number, b: string): number | void{
    if (typeof b !== 'undefined') {
        console.log(b)    
    } else {
        return a+1
    }
}

相关文章快速入口：鸿蒙ArkTS语言快速入门-TS（四）