前言
今天继续 typescript 的学习, 开始函数的学习.
函数
函数的定义
和 JavaScript 一样, TypeScript 函数可以创建有名字的函数和匿名函数. 你可以随意选择适合应用程序的方式, 不论是定义一系列 API 函数还是只使用一次的函数.
定义有名字的函数:
- function fn(){
- return 123;
- }
- console.log(fn())
定义匿名函数:
- let fn1 = function(){
- return 456;
- }
- console.log(fn1())
函数定义类型
函数类型包含两个部分: 参数类型和返回值类型. 当写出完整函数的时候, 两部分类型都是需要的. 我们需要给每个参数添加类型之后再为函数本身添加返回值类型.
- function fn3(name:string,age:number):string{
- return `${name} 的年龄是 ${age} 岁 `
- }
- console.log(fn3('小明',25))
如果函数没有返回值, 那么函数返回值类型是 void
- function fn4():void{
- console.log('这是一个没有返回值的函数')
- }
- console.log(fn4())
可选参数
在 JavaScript 中, 函数的实参和形参可以不一致, 也就是说实参的个数和形参的个数可以不相同. 比如: 下面的函数形参要求两个参数, 但是实参只传递了一个参数. 这种情况在 JS 中不会报错.
- function fn5(name,age){
- console.log(`${name} 的年龄是 ${age}`)
- }
- fn5('小红')
但是在 ts 中, 实参个数和形参个数必须一致. 如果不一样就需要配置可选参数. 将没有传入的参数设置为可选参数. 通过在可传可不传的参数类型前面加上? 表示该参数为可选参数.
- function fn5(name:string,age?:number):void{
- if(age){
- console.log(`${name} 的年龄是 ${age}`);
- }else{
- console.log(`${name}`);
- }
- }
- fn5('小红')
- fn5('小红',20)
注意: 可选参数最好放到参数最后面
默认参数
在 ES6 中我们可以在参数后面直接设置默认参数
- function fn6(name, age = 40) {
- if (age) {
- console.log(name + "\u7684\u5E74\u9F84\u662F" + age);
- }
- else {
- console.log("" + name);
- }
- }
- fn6('小红');
- fn6('小红', 20);
同样在 ts 中, 我们可以在参数类型后面设置默认参数:
- function fn6(name:string,age:number = 50):void{
- if(age){
- console.log(`${name} 的年龄是 ${age}`);
- }else{
- console.log(`${name}`);
- }
- }
- fn6('小明')
- fn6('小明',20)
剩余参数
在前面我们知道在 ts 中, 形参的个数和实参的个数必须是一致的. 但是有些情况下我们并不知道实参个数究竟是多少. 实参的个数有可能取决于用户的输入. 我们不可能每次都根据实参的个数来修改用户的输入. 比如: 计算多个数的和:
- function sum(a:number,b:number,c:number):number{
- return a + b + c;
- }
- console.log(sum(1,2,3))
- console.log(sum(1,2,3,4))
- console.log(sum(1,2,3,4,5))
我们可以观察到: 用户可能需要求得是三个数的和, 也可能需要求得是四个数的和. 也可能需要求得是五个数的和. 我们不能可能每次都根据用户的输入来修改形参的个数. 在 JS 中我们通过 arguments 来收集所有的参数. arguments 是一个伪数组. 在 ts 中我们同样通过一个数组来收集所有的参数. 只不过这个数组编译器会帮助我们创建. 名字是... 后面的变量名字.
- function sum(a:number,...REST:number[]):number{
- let sum = 0;
- for(let i = 0;i < REST.length;i++){
- sum += REST[i]
- }
- return sum;
- }
- console.log(sum(1,2,3))
- console.log(sum(1,2,3,4))
- console.log(sum(1,2,3,4,5))
函数的重载
JavaScript 本身是个动态语言. JavaScript 里函数根据传入不同的参数而返回不同类型的数据是很常见的. 比如:
- const person1 = {
- name:'小明',
- age:24,
- sex:'男'
- }
- const person2 = ['小红',26,'女']
- function info(person){
- // 判断传递进来的参数类型
- if(Array.isArray(person) == true){
- // 如果是数组...
- console.log(`${person[0]} 的年龄是 ${person[1]} 性别是 ${person[2]}`)
- }else{
- // 如果是对象...
- console.log(`${person.name} 的年龄是 ${person.age} 性别是 ${person.sex}`)
- }
- }
- console.log(fn7(person1))
- console.log(fn7(person2))
info 函数会根据传递进来的参数类型, 来进行相应的操作. ts 中重载的实现是通过为同一个函数提供
多个函数类型定义来进行函数重载.
- function fn7(person:[string,number,string]):string; // 第一个函数类型定义
- function fn7(person:object):string;// 第二个函数类型定义
- function fn7(person:any):any{
- // 判断传递进来的参数类型
- if(Array.isArray(person) == true){
- // 如果是数组...
- console.log(`${person[0]} 的年龄是 ${person[1]} 性别是 ${person[2]}`)
- }else{
- // 如果是对象...
- console.log(`${person.name} 的年龄是 ${person.age} 性别是 ${person.sex}`)
- }
- }
- console.log(fn7(person1))
- console.log(fn7(person2))
来源: https://www.cnblogs.com/yinhaiying/p/10807499.html