【TS】函数类型

文章目录

    • 一、函数类型
      • 1.1、指定函数参数类型
      • 1.2、指定函数返回值类型
      • 1.3、单独指定参数、返回值类型
      • 1.4、同时指定参数、返回值类型
      • 1.5、指定函数没有返回值(void)
    • 二、参数设置
      • 2.1、可选参数
      • 2.2、默认参数
      • 2.3、剩余参数

函数的类型实际上指的是:函数参数和返回值的类型

一、函数类型

1.1、指定函数参数类型

// 函数声明(Function Declaration)
function sum(x:number, y:number) {
    return x + y;
}
sum(1,2)	// 正确
sum('1',2)	// 报错,x、y类型必须都是设置的number类型

// 函数表达式(Function Expression)
let mySum = function (x:number, y:number) {
    return x + y;
};
mySum(1,2)		// 正确
mySum('1',2)	// 报错,x、y类型必须都是设置的number类型

1.2、指定函数返回值类型

// 函数声明(Function Declaration)
function sum(x, y):number {
    return x + y;
}
sum(1,2)	// 正确
sum('1',2)	// 报错,'1',2 进行的是字符串拼接,所以返回值是string,不是设置的number类型

// 函数表达式(Function Expression)
let mySum = function (x, y):number {
    return x + y;
};
mySum(1,2)		// 正确
mySum('1',2)	// 报错,'1',2 进行的是字符串拼接,所以返回值是string,不是设置的number类型

1.3、单独指定参数、返回值类型

// 普通函数形式
function add1 (num1: number, num2: number): number {
	return num1 + num2;
}
// 箭头函数形式
const add2 = (num1: number, num2: number): number => {
	return num1 + num2;
}

1.4、同时指定参数、返回值类型

  • 当函数作为表达式时,可以通过类似箭头函数形式的语法来为函数添加类型。
  • 这种形式只适用于函数表达式。
const add:(num1: number, num2: number)=>number = (num1,num2)=>{
	return num1 + num2;
}

1.5、指定函数没有返回值(void)

  • 如果函数没有返回值,那么,函数返回值类型为:void
function greet1(name: string): void{
	console.log('Hello',name)
}

const greet2: (name: string)=>void = (name) => {
	console.log('Hello',name)
} 

二、参数设置

2.1、可选参数

  • 输入多余的(或者少于要求的)参数,是不允许的。那么如何定义可选的参数呢?
  • 我们用 ? 表示可选的参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');	// 打印结果:'Tom Cat'
let tom = buildName('Tom');				// 打印结果:'Tom '
  • 需要注意的是,可选参数必须接在必需参数后面
function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.
// 翻译:错误TS1016:一个必需的参数不能跟随一个可选参数

2.2、默认参数

  • ES6 中,我们允许给函数的参数添加默认值。
  • TypeScript 会将添加了默认值的参数识别为可选参数:
function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Caa');	// 打印结果:'Tom Caa'
let tom = buildName('Tom');				// 打印结果:'Tom Cat'
  • 但是此时就不受「可选参数必须接在必需参数后面」的限制了:
function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');	// 打印结果:'Tom Cat'
let cat = buildName(undefined, 'Cat');	// 打印结果:'Tom Cat'

2.3、剩余参数

  • ES6 中,可以使用 ...rest 的方式获取函数中的剩余参数(rest 参数):
function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);
console.log(a)	//  [1, 2, 3]
  • 事实上,items 是一个数组。所以我们可以用数组的类型来定义它:
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);
  • 注意:rest 剩余参数只能是最后一个参数

你可能感兴趣的:(TypeScript,笔记,javascript,前端,typescript,void)