TypeScript——函数（函数定义类型、可选参数和默认参数、剩余参数、函数类型变量、使用接口封装函数变量类型）_typescript parameters

目录

 一、函数

1、为函数定义类型

2、可选参数和默认参数

3、剩余参数

4、函数类型变量

5、使用接口封装函数变量类型

---

 一、函数

参数列表里面的每个参数都需要名称和类型。

1、为函数定义类型

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。

TypeScript能够根据返回语句自动推断出返回值类型，因此我可以省略它。

函数形参必须声明数据类型，返回值可以不声明数据类型（根据函数体种的逻辑推到出的）

//声明式，作用域中直接声明function 
function add(x: number, y: number): number {
    return x + y;
}
function fm(n1:number,n2:string):[number,string]{
	return [n1*2,n2]
}
function fm3(n1:number,n2:string):any[]{	
	return [n1*2,n2,100]
}
//定义式（当作数据引用）
let myAdd = function(x: number, y: number): number { return x + y; };
let obj={fn:function():void{}};
let arr=[function():void{}];
(function(n:number):number{return n*2})(100)

2、可选参数和默认参数

传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

在TypeScript里我们可以在参数名旁使用 `?`实现可选参数的功能。

可选参数必须跟在必选参数后面

当然，还可以给参数设置默认值，在所有必选参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。

ps:带默认值的参数不需要放在必选参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 `undefined`值从而来获得默认值。

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right
 
function  fn(a1:number,n1?:number,n2?:string):Array<number|string>{
	return [a1,n2]
}
fn(100)   //因为第二个参数没传，所以是unde，在非严格模式下可以将undef传给任何类型
fn(100,100,"hello")
 
function  fm (n2:string,n3?:number,n1:number=100) {  //n1是可选默认
}
fm("hello")

3、剩余参数

在js里面叫rest参数   ...restArr。必须写在最后面

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
 
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
 
function fm (n1:number,n2:string,...reset) {
	console.log(reset)  
}
fm(10,"hello",10,203,405,[10])  // [10,203,405,[10]]
fm(10,"hello")   //[]
 
function fg (n1:number,n2:string,...reset:[number,string]) {  //如果这样写元组，那参数必须传
	console.log(reset)  //[100,"hello"]
}
fg(10,"hello",100,"hello")
 
function fg2 (n1:number,n2:string,...reset:number[]) {
	console.log(reset)
}
fg2(10,"hello",100,"hello") //报错 
fg2(100,"helloo")
fg2(100,"helloo",10,203,4)
fg2(100,"helloo",[10,203,4])  //报错
 
 function fg (n1:number,n2:string,...reset:[number,string]):[any[],Array<number>] {
	 return [[10,203,true],[10,20]]
}
fg(100,"hello",10,"hello")

4、函数类型变量

1. 变量的类型可以声明为函数类型;

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

2.函数类型属于自定义类型，包含两部分：参数类型和返回值类型；

//声明一个变量并指定类型为自定义的函数类型
let myadd:(x:number, y:number)=>number;
//声明一个函数
function add(x: number, y: number): number {
	return x + y;
}
//把函数赋值给类型为函数类型的变量
myadd = add;
 
//赋值匿名函数
myadd =  function(x: number, y: number): number {
	return x + y;
}
//赋值箭头函数
myadd =  (x: number, y: number):number=>{
	return x + y;
}

3.只要参数类型是匹配的，那么就认为它是有效的函数类型，并不要求参数名一样，很多时候参数名是为了增加可读性

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

4.在函数和返回值类型之前使用( `=>`)符号，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 `void`而不能留空。

//这里是声明c变量是一个函数类型  函数类型的写法 必须是: (某某参数类)=>返回值    这个格式不是箭头函数只是表达函数类型的表达式  
let c:(n1:number,n2:[number])=>[number,string];
//然后将c赋值给声明式的函数
c=function(agr1:number,arg2:[number]):[number,string]{
	return [100,"hello"]
}
//也可以把c赋值给箭头函数
c=(a1:number,a2:[number]):[number,string]=>{
  return[10,"a"]
}

5、使用接口封装函数变量类型

接口可以描述函数类型；为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。

自定函数类型代码往往很长，可以使用接口来封装该类型，之后使用接口来代表该类型

//函数类型接口
interface addType {
	(baseVaule:number, increValue:number):number
}
function add(x: number, y: number): number {
	return x + y;
}
let myadd1:addType = add;
let myadd2:addType = (x:number, y:number):number=>{
	return x+y;
}
 
interface UseEffect{
	():[]  //没有参数，返回值是没有值的元组
}

 eg：

interface callback1{
	(number):number
}
interface UseEffect{
	(number,callback1):[number]
}
interface obj1{  //对象
	age:number,
	name:string
}
interface UseMemo{
	(obj1):[obj1,UseEffect]	
}
let reactuseEfeect:UseMemo;
reactuseEfeect=function(arg1:obj1):[obj1,UseEffect]	{
	function fg(n1:number,n2:callback1):[number]{
		return [100]
	}
	return [{age:20,name:"karen"},fg]
}
let [x,y]=reactuseEfeect({age:20,name:"karen"})
// y的使用
y(100,function(arg:number):number{
	return 1
})