js与ts的函数对比

// 函数声明和函数表达式
// // js中
// // 函数声明，命名函数
// function add(a, b) {
//   return a+b
// }
// // 函数表达式，匿名函数
// let add2 = function (a, b) {
//   return a + b;
// }

// ts中函数声明：
// 命名函数：
// a 和 b都是number类型
// :number 表示返回值是number类型
function add(a: number, b: number): number {
  return a + b;
}
console.log(add(1, 2)); // 3
let c1: number = add(1, 2);
console.log(c1); //3

//函数表达式，匿名函数
let add2 = function (a: number, b: number): number {
  return a + b;
};
console.log(add2(2, 2)); // 4

// 函数完整写法
let add3: (a: number, b: number) => number = function (
  a: number,
  b: number
): number {
  return a + b;
};
console.log('add3', add3(1, 4)); // 5

// 函数的可选参数和默认参数
let getName = function (
  x: string = '李',
  z: string = '你好',
  y?: string
): string {
  return x + y + z;
};
// y?: string 可选参数 ? 必选参数不能位于可选参数后
// let getName1 = function (z: string = '你好', y?: string, x: string): string {
//   return x + y + z;
// };
// console.log(getName('李'));// 李undefined你好
// 默认参数是可以放在可选参数以及必选参数之后
console.log(getName('张三')); //张三undefined你好

// 剩余参数和函数重载
// 剩余函数 ...args
function fn(x: string, y: string, ...args: number[]) {
  console.log(x, y, args);
}
fn('', '', 1, 2, 3, 4, 5);

// 函数重载 函数名相同，形参不同的多个函数
// 数字 相加 ,字符串 拼接  联合类型
// 函数重载说明,可以使用重载定义多个newAdd的函数类型
function newAdd(x: number, y: number): number;
function newAdd(x: string, y: string): string;
function newAdd(x: string | number, y: string | number): string | number {
  if (typeof x == 'string' && typeof y == 'string') {
    // 可对字符串做其他操作
    return x + y;
  } else if (typeof x == 'number' && typeof y == 'number') {
    return x + y;
  }
  return '';
}
// 有个缺点，不能精确的表达
// 输入为数字时，输出也为数字，输入为字符串时，输出也为字符串
console.log(newAdd(1, 2)); //3
console.log(newAdd('王', '非')); //王非
// 有函数重载后，就会正确的区分输入数字输出数字，输入字符串，输出也是字符串