基于Vue项目的TypeScript之函数基础篇

ゝ一世哀愁。 2021-08-04 13:41 254阅读 0赞

## 一、函数 ##

注：在菜鸟教程上面学习 TypeScript ，并在本地 Vue 项目上练手。

methods: { 
     /** * ts-function 之【函数返回值】 * 1、无参 2、有参 */
     greet(): string { 
       return "Hello World.";
     },
     greetParams(x: number, y: number): number { 
       return x + y;
     },
     /** * ts-function 之【可选参数与默认参数】 2 1 */
     choosableName1(firstName: string, lastName: string): string { 
       return firstName + " " + lastName;
     },
     choosableName2(firstName: string, lastName?: string): string { 
       if (lastName) return firstName + " " + lastName;
       else return firstName;
     },
     defaultFun(price: number, rate: number = 0.50) { 
       let discount = price * rate;
       console.log("计算结果：", discount);
     },
     /** * ts-function 之【剩余参数】 */
     buildName(firstName: string, ...restOfName: string[]): string { 
       return firstName + " " + restOfName.join(" ");
     },
     addNumbers(...nums: number[]): number { 
       let sum: number = 0;
       nums.forEach(item => { 
         sum += item;
       });
    
       return sum;
     },
     /** * ts-function 之【匿名函数】 * 匿名函数是一个没有函数名的函数，在运行时动态声明 * 可以将匿名函数赋值给一个变量，这种表达式称为函数表达式 * 1、不带参数的匿名函数 2、带参数的匿名函数 */
     noParamsFun() { 
       let msg = (): string => { 
         return "Hello World!"
       }
       console.log('不带参数的匿名函数：' + msg());
     },
     paramsFun() { 
       let res = (a: number, b: number): number => { 
         return a * b;
       }
       console.log('带参数的匿名函数：' + res(12, 2));
     },
     /** * ts-function 之【匿名函数自调用】 */
     lambda() { 
       (function () { 
         let x: string = "Hello!!!";
         console.log(x);
       })();
     },
     /** * ts-function 之【构造函数】 */
     myFun() { 
       let myFunction = new Function("a", "b", "return a * b");
       let x: number = myFunction(4, 4);
       console.log('构造函数调用：' + x);
     },
     /** * ts-function 之【递归函数】 * 在函数内调用函数本身 */
     factorial(num: number): number { 
       if (num <= 0) return 1;
       else return (num * this.factorial(num - 1));
     },
     /** * ts-function 之【Lambda函数 -- 箭头函数】 */
     sum() { 
       let sumFun = (x: number): number => { 
         return 10 + x;
       };
       console.log(sumFun(100));
     },
     /** * ts-function 之【函数重载】 * 重载：方法名相同，参数不同，返回的类型可以相同、可以不同。 * 每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。 * 1、参数类型与参数数量不同 */
     reload() { 
       function disp(s1: string): void;
       function disp(n1: number, s1: string): void;
       
       function disp(x: any, y?: any): void { 
         console.log('x:' + x);
         console.log('y:' + y);
       }
    
       disp("abc");
       disp(1, "xyza");
     }
    }

## 二、函数调用与结果 ##

mounted(): void { 
      const _this = this;
      this.$nextTick(() => { 
        // 函数返回值
        console.log('函数返回值(无参)：' + _this.greet()); // 函数返回值(无参)：Hello World.
        console.log('函数返回值(有参)：' + _this.greetParams(1, 2)); // 函数返回值(有参)：3
    
        // 可选参数 默认参数
        console.log(_this.choosableName1('anqi2', 'Yan')); // anqi2 Yan
        console.log(_this.choosableName2('anqi3', 'Yan')); // anqi3 Yan
        _this.defaultFun(1000); // 计算结果： 500
        _this.defaultFun(1000, 0.2); // 计算结果： 200
    
        // 剩余函数
        let sum: number = _this.addNumbers(1, 2, 3);
        console.log('sum:' + sum); // sum:6
        let allName: string = _this.buildName("Yan", "an", "qi");
        console.log('allName:' + allName); // allName:Yan an qi
    
        // 匿名函数
        _this.noParamsFun(); // 不带参数的匿名函数：Hello World!
        _this.paramsFun(); // 带参数的匿名函数：24
    
    	// // 匿名函数自调用
        _this.lambda(); // Hello!!!
    
    	// 构造函数
        _this.myFun(); // 构造函数调用：16
    
        let factorialRes = _this.factorial(6); //递归函数
        console.log(factorialRes); // 720
    
    	// Lambda函数 -- 箭头函数
        _this.sum(); // 110
    
    	// 函数重载
        _this.reload();
        // x:abc
    	// y:undefined
    	// x:1
    	// y:xyza
      });
    },