TypeScript 入门学习（三）：TypeScript 函数定义

叁歲伎倆 2021-09-30 06:42 479阅读 0赞

# TypeScript 函数定义 #

### 函数定义 ###

// 函数声明法
    function fun(): string {  return 'xxx';}
    
    // 匿名函数声明法 
    var fun = function(): string {  return 'xxx';}

### 函数传参 ###

// 传入参数
    function foo(name: string, age: number): string {  
       return `${name}---${age}`;
    }
    console.log(getInfo('star', 23)); // star---23

### 可选参数 ###

function foo(bar: number, bas?: string): void {   
      if (bas) {    
        console.log(`${bar}---${bas}`);    
      } else {    
        console.log(bar);  
      }
    }
    
    foo(123); // 123
    foo(123, 'hello'); // 123---hello

**注意：** 可选参数必须放在必选参数的后面。

// 错误写法
    function foo(bar: number, bas?: string, co: string): void { 
      // ...
    }

### 默认参数 ###

当调用者没有提供该参数时，你可以提供一个默认值（在参数声明后使用 = someValue ）。

function foo(bar: number, bas: string = 'hello'): void {  
       console.log(bar, bas);
    }
    
    foo(123); // 123 hello
    foo(123, 'world'); // 123 world

### Rest 参数 ###

function foo(bar: string, ...arg: number[]): void { 
       console.log(bar);  
       for (const e of arg) {    
         console.log(e);  
       }
    }
    foo('hello', 1, 3, 4, 5); // hello 1 3 4 5

**注意：** Rest 参数必须放在必选参数后面，并且可选参数和 Rest 参数是兼容的。

### 函数重载 ###

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

function foo(name: string): void;
    function foo(name: string, age: number): void;
    function foo(name: string, age?: number): void {  
      if (age) {    
         console.log(`${name}---${age}`); 
       } else {    
          console.log(name);  
       }
    }
    foo('star');foo('star', 23);

最后一个函数头是在函数体内实际处于活动状态但不可用于外部。TypeScript 中的函数重载没有任何运行时开销。它只允许你记录希望调用函数的方式，并且编译器会检查其余代码。

发表评论取消回复

表情：

评论列表（有 0 条评论，479人围观）

还没有评论，来说两句吧...

相关阅读

相关 typescript学习笔记三：typescript中的函数定义

1.ts函数的定义函数声明 function action():string{ return '去打篮球' //正确 }

桃扇骨/ 2023年01月05日 01:15/ 0 赞/ 269 阅读

相关 Typescript学习--函数声明

先看一下es5中定义函数的方式： // 函数声明 function run3() { } // 匿名函数 var run4 = functio

蔚落/ 2022年10月25日 00:50/ 0 赞/ 219 阅读

相关 TypeScript入门

为了搭建一个比较现代的前端应用，似乎目前唯一的选择是JavaScript，但是传统的JavaScript存在着缺陷，人们总结出来了JavaScript的拓展语言，这就是Type

「爱情、让人受尽委屈。」/ 2022年09月11日 12:14/ 0 赞/ 169 阅读

相关 TypeScript 入门

TypeScript 类型注解接口类运行TypeScript Web应用 TypeScript T

╰半夏微凉°/ 2022年05月19日 23:19/ 0 赞/ 232 阅读

相关 TypeScript 入门学习（五）：TypeScript 泛型

TypeScript 泛型泛型就是解决类、接口、方法的复用性，以及对不特定数据类型的支持。一般使用大写字母 T、U 等表示，也可以是其他字母。泛型函数

曾经终败给现在/ 2021年09月30日 07:44/ 0 赞/ 437 阅读

相关 TypeScript入门学习（四）：TypeScript 类与接口

TypeScript 类与接口类定义 class使用关键字 class 声明。 class Person { name: string;

ゞ浴缸里的玫瑰/ 2021年09月30日 07:44/ 0 赞/ 408 阅读

相关 TypeScript 入门学习（三）：TypeScript 函数定义

TypeScript 函数定义函数定义 // 函数声明法 function fun(): string { return 'xxx';}

叁歲伎倆/ 2021年09月30日 06:42/ 0 赞/ 480 阅读

相关 TypeScript 入门学习（一）：TypeScript 环境准备

TypeScript 入门学习 TypeScript 介绍 TypeScript 是由微软开发的一款开源的编程语言。 TypeScript 是 Java

忘是亡心i/ 2021年09月29日 23:28/ 0 赞/ 406 阅读

相关 TypeScript 入门学习（二）：TypeScript 数据类型

TypeScript 数据类型 TypeScript 中为了使编写的代码更规范，更有利于维护，增加了类型校验，主要给我们提供了以下数据类型。布尔类型（boole

野性酷女/ 2021年09月29日 23:22/ 0 赞/ 463 阅读

相关 TypeScript 入门学习（六）：TypeScript 装饰器

Typescript 装饰器装饰器是一种特殊类型的声明，它可以被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲，装饰器就是一个方法，可以注入到类、方法、属

短命女/ 2021年09月20日 16:10/ 0 赞/ 438 阅读