TS-函数和this

函数

函数类型：创建有名字的函数和匿名函数

• 具名函数：

  function add(x,y) { 
  	return x+y 
  }

• 匿名函数：

  const add = function(x,y) { 
  	return x+y 
  }

完整的函数类型

• 定义：(形参：参数类型) => 返回类型 = 函数(形参：参数类型)：返回类型{}
• 示例：

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

推断类型: ts编译器会自动识别出类型

可选和默认参数

• ts规定，『形参个数和传参个数要一致』
• 『可选必须放在必选后面』，没传默认为undefined
• 没传或传undefined时叫默认初始值。『带默认值的参数为可选，位置随意』
• 『可选参数与末尾的默认参数共享参数类型』

剩余参数：个数不限的可选参数

function buildName(firstName: string, ...restOfName: string[]) {
	return firstName + " " + restOfName.join(" ")
}

this

call方法

1. 从参数1到末尾创建参数列表
2. call方法的参数一是this值，其余的参数是调用函数的形参

   function hello(thing) {
   	console.log(this + " says hello " + thing)
   }
   hello.call("Yehuda", "world") // Yehuda says hello world

this和箭头函数

• 『在js中，顶级的非方法式调用会将this视为window』
• 注意：『在严格模式下，this为undefined而不是window』
• 解决方法：『使用箭头函数』，在函数被返回时就绑好正确的this，箭头函数能保存函数创建时的 this值，而不是调用时的值
• ts中设置–noImplicitThis标记。它会指出里的this的类型

this参数：是假的参数

• 形式:

  function f(this: void) {}

回调函数里的this参数

• 显式指定this类型，函数要带有this:void。但只能这个实例里的这个函数可用。
• 用箭头函数，它不会捕获this，实例里的this都指向一个。但每个对象都会创建一次。

重载

• 同一个函数提供多个函数类型定义来进行函数重载

  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 {
  	// typeof检测非undefined，string，number，boolean之外，都只会返回object
  	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)] // 传值
  let pickedCard2 = pickCard(15)