07 - TS函数类型

// ------------------------- 07 - 函数类型

/**
 * 1、定义函数的参数类型和函数的返回值的数据类型
 * 2、函数默认的参数 | 函数的可选参数
 * 3、参数是一个对象 传入一个对象
 * 4、使用this 和定义函数this类型
 * 5、函数重载
 * 
 */


/**
 *  1、定义函数的参数类型和函数的返回值的数据类型
 *      fn(xxx:string):string{return xxx}
 */
{

// 普通函数
function fn1(name: string, age: number): string {
  return name + age + '岁'  // 隐性转换  最终 字符串类型
}

// 箭头函数
const fn2 = (a: number, b: number): number => a + b     // return的 -- 2

console.log(fn1('悟空', 20)); // 悟空20岁
console.log(fn2(1, 1)); // 2

}
/**
 *  2、函数默认的参数 | 函数的可选参数
 *      fn(xxx:string):string{return xxx}
 */

// 函数的默认参数
function fn3(name: string, age: number = 10, age2: number = 10): string {
  const num = age + age2
  return name + num + '岁'
}

// 函数的可选参数
function fn4(a: number, b ?: number): number {
  return a + b
}

console.log(fn3('悟空', 20)); // 悟空30岁
console.log(fn4(1)); // NaN   1 + undefined = NaN


/**
 *  3、参数是一个对象 传入一个对象
 *      用interface就行
 */
interface T {
  name:string,  
  like:string
}
function fn5 (obj:T):T{
  obj.name = '魔王'
  return obj
}
let data = {
  name:'悟空',
  like:'大长腿'
}
console.log(fn5(data)); // { name: '魔王', like: '大长腿' } 


/**
 * 4、使用this 和定义函数this类型
 *    TS中 可以定义this的类型  在js中无法使用 并且函数中的第一个参数 就必须是this
 */

interface P {
  arr: number[],
  fn:(this:P,num:number)=>{}
}
let data2:P = {
  arr:[1,2,3,4],
  fn(this:P,num:number){
    return this.arr.push(num)
  }
}
data2.fn(5)  // 传参的时候 可以当this不存在  num就是第一个参数
console.log(data2.arr);

/**
 * 5、函数重载
 * 重载的方法名字相同，而参数不同，返回类型可以相同也可以不同
 * 如果参数类型不同，则参数类型应设置为any。
 * 参数数量不同，你可以将不同的参数设置为可选。
 *    
 */
let user:number[] = [1,2,3]
function findNum(id:any):number[] // 如果传入了id就是单个查询
function findNum():number[] // 如果没有传入参数就是查询全部
function findNum(ids?:number | number[]):number[]{
  if(typeof ids === 'number'){
    return user.filter(item=>item === ids)
  }else if(Array.isArray(ids)){
    user.push(...ids)
    return user
  }else{
    return user
  }
}
findNum([1,2,3])

 原创：前端-悟空 请勿抄袭 可以转载

 下一章：08-TS 联合类型+类型断言+交叉类型_Sing前端-悟空的博客-CSDN博客

 码云地址：TypeScript: 深入TypeScript 与您同行