iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >TypeScript的函数定义与使用案例教程
  • 154
分享到

TypeScript的函数定义与使用案例教程

2024-04-02 19:04:59 154人浏览 安东尼
摘要

typescript中函数的定义和使用 1. 声明一个函数约束其传参类型,以及返回值类型 传入两个参数,没有返回值 const fun1 = (key: string, va

在这里插入图片描述

typescript中函数的定义和使用

1. 声明一个函数约束其传参类型,以及返回值类型


	传入两个参数,没有返回值
const fun1 = (key: string, value: number): void => {
		console.log(key, value);//"Typescript",100
};
fun1("Typescript", 100);

2.TypeScript中的函数配置可选参数,在ES5或者es6中函数中的实参可以不传递进去,但是在TS中必须传递进去,如果需要设置非必传参数,就必须设置可选参数具体如下


const fun2 = (a: string, b?: number) => {
//形参后面加个?代表可以传递参数也可以不传递参数
	console.log(a);//typescript
}
fun2('typescript');
注意:配置可选参数必须配置到最后一个参数,
否则ts会有报错提示(虽然编译可以通过但不建议这么使用)

3.TypeScript的函数设置默认值


//设置了默认值,并传入实参,默认实参会代替默认值,这一点和ES6一致
const fun3 = (a: number, b: string = 'ECMAScript'): void => {
	console.log(a);//20
	console.log(b);//typescript
};
fun3(20, 'typescript');
/设置了默认值,没有传递实参,默认B的值就是true
	const fun4 = (a: number, b: boolean = true): void => {
	    console.log(a);//60
	    console.log(b);//true
};
fun4(60);

4.TypeScript函数的剩余参数


//接收多个参数,并放到一个容器里面,与ES6中的rest...三点运算符一样
const fun5 = (...result: number[]): void => {
//用变量result接收实参,并指明数据类型
let sum: number = 0;
	for (let index = 0; index < result.length; index++) {
	     sum += result[index];
};
    console.log(sum);//150
};
fun5(10, 20, 30, 40, 50);
//注意接收多个实参的变量必须放在最后一个,否则会报错
	
//接收参数,与变量名一一对应
const fun6 = (first: string, ...result: string[]): void => {
	console.log(first);//string
	console.log(result);//[ 'number', 'boolean', 'function', 'true' ]
}
fun6('string', 'number', 'boolean', 'function', 'true');

5.TypeScript中的函数重载


// java中方法的重载:重载指的是两个或者两个以上同名函数,
但它们的参数不一样,这时会出现函数重载的情况。
// typescript中的重载:
通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//TS中函数重载  TS为了兼容ES5和ES6 不能写大括号
//对实参类型进行约束
	function dataFn(a: string, b: number): void
	function dataFn(a: number, b: string): void
	function dataFn(a: number, b: number): void
	function dataFn(a: any, b: any): void {
//对传入的实参类型进行判断 如果符合某个函数就执行其函数体
	if(typeof (a) === "string") {
		    console.log('This is 字符串')
	};
	if (typeof (a) === "number" && typeof (b) === "number") {
		     console.log('this is 数字');
	};
	if (typeof (a) === 'number') {
		     console.log(a, b);//20,typescript
		 } else {
		    }
	}
	dataFn(10, 20);
	dataFn(20, 'typescript');

6.TypeScript中的箭头函数


基本形式:
    let func = num:number => num; //只有一个形参可以‘='后面写形参名,并约束其类型
	let func = () => num;//如果有多个形参,在‘='后面写‘()'把形参写在()里面并约束其类型
	let sum = (num1, num2) :number=> num1 + num2;//如果只有1条执行语句,
	//直接在‘=>'后面写执行语句即可,还要指定其返回类型
	如果有多条语句必须写{},将代码写在{}里面,重新指定返回值,以及类型
注意事项:
	函数体内的this对象,就是定义时所在的上下文,如果箭头函数是全局里面的话,
	还是指向window,建议在箭头函数外部再嵌套一层函数以便于控制里面的this
	不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
	不可以使用arguments对象,该对象在函数体内不存在。
	如果要用,可以用 rest 参数代替。
	const fun8 = (a: number, b: number): void => {
		console.log(a, b)
	}
	fun8(10, 20);

到此这篇关于TypeScript的函数定义与使用案例教程的文章就介绍到这了,更多相关TypeScript的函数定义与使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript的函数定义与使用案例教程

本文链接: https://www.lsjlt.com/news/131003.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript的函数定义与使用案例教程
    TypeScript中函数的定义和使用 1. 声明一个函数约束其传参类型,以及返回值类型 传入两个参数,没有返回值 const fun1 = (key: string, va...
    99+
    2022-11-12
  • TypeScript定义接口(interface)案例教程
    接口的作用: 接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定。 在Typescript中是这么描述的: TypeScript的核心原则之...
    99+
    2022-11-12
  • TypeScript数组的定义与使用详解
    目录基本定义声明数组时直接初始化访问数组Array对象声明数组时指定数组大小两种定义方式声明多维数组(含泛型)普通版泛型版类数组数组解构通过接口描述数组数组迭代基本定义 声明数组时直...
    99+
    2022-11-13
  • TypeScript类型系统自定义数据类型教程示例
    目录TypeScript 类型系统和自定义数据类型什么是类型系统函数类型类型别名可选参数默认参数函数重载接口类型可选属性只读属性接口扩展多重接口声明接口的索引签名用接口描述函数类类型...
    99+
    2022-11-16
    TypeScript自定义数据类型 TypeScript类型系统
  • Python函数定义与使用的示例分析
    这篇文章主要介绍Python函数定义与使用的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!函数的定义什么是函数? &mdash; > 函数是具有某种特定功能的代码块,可以重复使用(在前面数据类型...
    99+
    2023-06-29
  • Java基础教程之数组的定义与使用
    目录一.数组的基本概念二.数组的声明三.数组的创建及初始化1.数组的创建2.数组的初始化四.访问数组元素 五.for each 循环 六.数组的拷贝 七.数组排序 八.二维数组 总结...
    99+
    2022-11-12
  • TypeScript安装与使用的详细教程
    目录初识TypeScriptTypeScript给JS添加类型支持的原因TypeScript相比JS的优势TS工具包的安装TS文件的编译和运行简化TS的运行步骤附:查看ts版本、安装...
    99+
    2023-01-10
    ts安装 ts教程 typescript教程
  • 实例讲解Python中函数的调用与定义
    调用函数: #!/usr/bin/env python3 # -*- coding: utf-8 -*- # 函数调用 >>> abs(100) 100 >>...
    99+
    2022-06-04
    函数 实例 定义
  • Python 函数的定义与调用
    ✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的博客 🍊个人信条:为天地立心,为生民立命,为往圣继绝学,为万世...
    99+
    2023-10-12
    python 开发语言
  • Python3.5基础——函数的定义与使
    1、函数学习框架 2、函数的定义与格式 (1)定义 (2)函数调用 注:函数名称不能以数字开头,建议函数名称的开头用小写的字母 (3)函数有四种格式,分别是:无参数无返回值,有参数无返回值、无参数有返回值、有参数有返回值 #...
    99+
    2023-01-31
    函数 定义 基础
  • 【Python详解】Python类的详细定义与使用案例
    大家好,我是洲洲,欢迎关注,一个爱听周杰伦的程序员。关注公众号【程序员洲洲】即可获得10G学习资料、面试笔记、大厂独家学习体系路线等…还可以加入技术交流群欢迎大家在CSDN后台私信我! 本文目...
    99+
    2023-09-04
    python python类 类的定义 python类的使用 python类的定义
  • MySQL完整性约束的定义与实例教程
    目录完整性约束完整性约束的定义完整性约束的分类主键约束(primary key)单个主键和联合主键的区别主键字段的挑选原则删除主键约束主键自增(auto_increment)主键自增...
    99+
    2022-11-12
  • C语言之函数返回值与参数传递案例教程
    C语言函数返回值与参数传递 一:参数传递 C语言的函数中必不可少的就是参数传递,可以采用传值和传指针两种方式。 1.传值的形式:只是将参数值的拷贝传给函数,并非参数本体如: in...
    99+
    2022-11-12
  • Kotlin函数使用示例教程
    目录我们先看看简单的函数我们写一个求和函数函数头函数体调用函数非常简单反编译Java源代码步骤接下来我们来看看匿名函数这是接口的声明我们先看看简单的函数 // 前面的文章我们了解到它...
    99+
    2022-11-13
  • vue props使用typescript自定义类型的方法实例
    目录前言一、问题定位二、初级解决方案解法一,函数法解法二 PropType泛型三、props的校验过程四、后话参考总结 前言 Base: vue@3.2.33 + type...
    99+
    2023-01-28
    vue组件props ts自定义类型
  • JavaScript函数的定义与基本使用方法
    本篇内容介绍了“JavaScript函数的定义与基本使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • ajax的定义的示例与使用
    本篇内容介绍了“ajax的定义的示例与使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!AJAX全称为“A...
    99+
    2022-10-19
  • Go语言函数怎么定义与使用
    今天小编给大家分享一下Go语言函数怎么定义与使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.前言函数是一段代码的片段,...
    99+
    2023-07-04
  • mysql自定义函数原理与用法实例分析
    本文实例讲述了mysql自定义函数原理与用法。分享给大家供大家参考,具体如下: 本文内容: 什么是函数 函数的创建 函数的调用 函数的查看 函数的修改 函数的删除 首发日期:2018-04...
    99+
    2022-05-26
    mysql 自定义函数
  • MySQL存储过程与函数的案例分析
    这篇文章将为大家详细讲解有关MySQL存储过程与函数的案例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。        &nb...
    99+
    2022-10-18
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作