【03】基础知识:typescript中的函数

一、typescript 中定义函数的方法

函数声明法

function test1(): string {
    
    
	return '返回类型为string'
}

function test2(): void {
    
    
	console.log('没有返回值的方法')
}

函数表达式/匿名函数

const test3 = function(): number {
    
    
  return 1
}

二、typescript 中 函数参数写法

1、typescript 中定义函数传参

函数声明

function getInfo(name: string, age: number): string {
    
    
	// 传参name为string类型、age为number类型,返回类型为string
	return `${
      
      name} - ${
      
      age}`
}

getInfo('zhangsan', 20) // zhangsan - 20

函数表达式/匿名函数

const getInfo2 = function(name: string, age: number): string {
    
    
	// 传参name为string类型、age为number类型,返回类型为string
	return `${
      
      name} - ${
      
      age}`
}

getInfo2('zhangsan', 18) // zhangsan - 18

2、可选参数

在 es5 中,方法的形参和实参个数可以不一样;但是在 ts 中必须一样,如果不一样就需要配置可选参数。

ts 中 通过【 形参?: 数据类型 】形式定义可选参数,代表该参数在方法调用时可以不传入。

注意:可选参数必须到参数的最后面,否则ts编译时会报错

function getInfo(name: string, age?: number): string {
    
    
	if (age) {
    
    
		return `${
      
      name} - ${
      
      age}`
	} else {
    
    
		return `${
      
      name} - 年龄未定义`
	}
}

getInfo('zhangsan') // zhangsan - 年龄未定义
getInfo('zhangsan'20) // zhangsan - 20

3、默认参数

创建方法时,可以给参数指定默认值。

function getInfo(name: string, age: number=18): string {
    
    
	return `${
      
      name} - ${
      
      age}`
}

getInfo('zhangsan') // zhangsan - 18
getInfo('zhangsan'20) // zhangsan - 20

4、剩余参数

通过 es6 的 三点运算符,接受形参传过来的值

function sum (...result: number[]): number{
    
    
	return result.reduce((prev, cur) => {
    
    
		return prev + cur
	}, 0)
}

sum(1, 2, 3, 4) // 10
function sum (a: number, ...result: number[]): number{
    
    
  return result.reduce((prev, cur) => {
    
    
    return prev + cur
  }, a)
}

sum(1, 2, 3, 4) // 10

三、函数重载

javascript 是面向过程编程语言,没有函数重载的概念

java 中函数重载指的是,两个或者两个以上同名函数,但它们的参数不一样

typescript 中的函数重载指的是,通过为同一个函数提供多个函数类型定义来实现多种功能的目的。

typescript 为了兼容 js 重载的写法和 java 中有区别。

function getInfo(name: string): string 
function getInfo(age: number): number
function getInfo(str: any): any {
    
    
	if (typeof str === 'string') {
    
    
		return `我叫${
      
      str}`
	} else {
    
    
		return str
	}
} 

getInfo('张三') // 我叫张三
getInfo(19) // 19
getInfo(false) // ts编译报错
function getInfo(name: string): string 
function getInfo(name: string, age: number): string
function getInfo(name: any, age?: any): any {
    
    
	if (age) {
    
    
		return `我叫${
      
      name},年龄是${
      
      age}`
	} else {
    
    
		return `我叫${
      
      name}`
	}
}

getInfo('张三', 19) // 我叫张三,年龄是19
getInfo('张三') // 我叫张三
getInfo('zhangsan', true) // ts编译报错
getInfo(19) // ts编译报错

猜你喜欢

转载自blog.csdn.net/weixin_45559449/article/details/132272939
今日推荐