TypeScript 中「函数」的基本使用

简介: TypeScript 中「函数」的基本使用

在 TypeScript 中,除了给某个变量添加 类型注释 之外,函数需要书写 参数类型 和 返回值类型,这样 TypeScript 就可以对函数的参数和返回值类型进行约束,从而达到类型严谨的目的。


如果涉及到 可选参数、默认参数、函数的重载,则需要进行特殊的书写,具体可以看下面操作。


1、函数返回值类型

//函数声明
function fun():string{    //约束返回值的类型为是 string,如果没有返回值写:void
    return 'erha';
}
//匿名函数
let fun = function():number{    //约束返回值的类型为 number,如果没有返回值写:void
    return 123;
}

2、函数参数类型

//函数声明:约束参数类型和返回值类型
function getInfo(name:string, age:number):string{
    return `${name} ---- ${age}`;
}
//匿名函数:约束参数类型和返回值类型
let getInfo = function(name:string, age:number):string{
    return `${name} ---- ${age}`;
}

3、可选/默认/剩余参数

let getInfo = function(name:string, age?:number):string{    //通过 ? 配置可选参数
    if(age){
        return `${name} ---- ${age}`;
    }else {
        return `${name} ---- 别问!`;
    }
}
let getInfo = function(name:string, age?:number=20):string{    //通过 = 设置 age 的默认参数为 20
    return `${name} ---- ${age}`;
}
function sum(a:number, ...array:number[]):number{    //通过 ... 设置剩余参数
    let sum = 0;
    for(let i=0;i<array.length;i++){
        sum += array[i];
    }
    return a + sum;
}
sum([1, 2, 3, 4, 5, 6]);    //其中 1 对应 a,而 [2, 3, 4, 5, 6] 对应 array

4、函数的重载

function fun(){}
function fun(){ return 111;}    //在 es5 中,如果有同名函数的话,后者会覆盖前者
function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{        //TypeScript 的函数重载和 Java 中的函数重载不一样
    if(typeof str === 'string'){
        return '我叫:' + str;
    }else{
        return '我的年龄是' + str;
    }
}
目录
相关文章
|
7月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
79 4
|
7月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
72 0
|
7月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
206 2
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
3月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
35 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
88 0
|
5月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
30 0
|
6月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
6月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型
下一篇
DataWorks