返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >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://lsjlt.com/news/131003.html(转载时请注明来源链接)

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

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

  • 微信公众号

  • 商务合作