TypeScript 中的函数

函数的定义

es5 定义函数的方法

函数声明法

function run() {
  return "run";
}

匿名函数

var run2 = function () {
  return "run2";
};

ts 中定义函数的方法

函数声明法

function run(): string {
  return "run";
}

错误写法

function run(): string {
  return 123;
}

匿名函数

var fun2 = function (): number {
  return 123;
};

alert(fun2()); /*调用方法*/

ts 中定义方法传参

function getInfo(name: string, age: number): string {
  return `${name} --- ${age}`;
}

alert(getInfo("zhangsan", 20));

var getInfo = function (name: string, age: number): string {
  return `${name} --- ${age}`;
};

alert(getInfo("zhangsan", 40));

没有返回值的方法

function run(): void {
  console.log("run");
}
run();

方法可选参数

es5 里面方法的实参和行参可以不一样，但是 ts 中必须一样，如果不一样就需要配置可选参数

function getInfo(name: string, age?: number): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} ---年龄保密`;
  }
}

alert(getInfo("zhangsan"));

alert(getInfo("zhangsan", 123));

注意:可选参数必须配置到参数的最后面

错误写法

function getInfo(name?: string, age: number): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} ---年龄保密`;
  }
}

alert(getInfo("zhangsan"));

默认参数

es5 里面没法设置默认参数，es6 和 ts 中都可以设置默认参数

function getInfo(name: string, age: number = 20): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} ---年龄保密`;
  }
}

// alert( getInfo('张三'));
alert(getInfo("张三", 30));

剩余参数

function sum(a: number, b: number, c: number, d: number): number {
  return a + b + c + d;
}

alert(sum(1, 2, 3, 4));

三点运算符 接受新参传过来的值

function sum(...result: number[]): number {
  var sum = 0;

  for (var i = 0; i < result.length; i++) {
    sum += result[i];
  }

  return sum;
}

alert(sum(1, 2, 3, 4, 5, 6));

function sum(a: number, b: number, ...result: number[]): number {
  var sum = a + b;

  for (var i = 0; i < result.length; i++) {
    sum += result[i];
  }

  return sum;
}

alert(sum(1, 2, 3, 4, 5, 6));

ts 函数重载

java 中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。

typescript 中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

ts 为了兼容 es5 以及 es6 重载的写法和 java 中有区别。

es5 中出现同名方法，下面的会替换上面的方法

function css(config) {}

function css(config, value) {}

ts 中的重载

function getInfo(name: string): string;

function getInfo(age: number): string;

function getInfo(str: any): any {
  if (typeof str === "string") {
    return "我叫：" + str;
  } else {
    return "我的年龄是" + str;
  }
}

alert(getInfo("张三")); //正确

alert(getInfo(20)); //正确

alert(getInfo(true)); //错误写法

function getInfo(name: string): string;

function getInfo(name: string, age: number): string;

function getInfo(name: any, age?: any): any {
  if (age) {
    return "我叫：" + name + "我的年龄是" + age;
  } else {
    return "我叫：" + name;
  }
}

alert(getInfo("zhangsan")); //正确

alert(getInfo(123)); // 错误

alert(getInfo("zhangsan", 20));

箭头函数 es6

this 指向的问题 箭头函数里面的 this 指向上下文

setTimeout(function () {
  alert("run");
}, 1000);

setTimeout(() => {
  alert("run");
}, 1000);