当前位置:网站首页>TS快速入门-函数
TS快速入门-函数
2022-07-05 00:08:00 【温情key】
在TS里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方
TS中的函数大部分和JS相同,不同之处在于ts会给函数返回值和参数加上类型声明
在TS中,函数仍然是最基本、最重要的概念之一
函数类型定义
函数类型的定义包括对参数和返回值的类型定义
1. 直接定义函数类型
function sayMyself(name: string, age: number): string {
return `我是${
name},我今年${
age}岁`;
}
const sayMyself = (name: string, age: number) => {
return `我是${
name},我今年${
age}岁`;
}
console.log(sayMyself('温情key', 23)); // 我是温情key,我今年23岁
function printMsg(warn: string): void {
console.warn('警告信息', warn);
}
const printMsg = (warn: string): void => {
console.warn('警告信息', warn);
}
printMsg('警告警告123'); // 警告信息 警告警告123
如果在这里省略参数的类型,TypeScript
会默认这个参数是 any
类型;
如果省略返回值的类型
要是函数无返回值,那么 TypeScript
会默认函数返回值是 void
类型;
要是函数有返回值,那么 TypeScript
会根据定义的逻辑推断出返回类型。
2. type定义函数类型
/* 先利用type声明一个函数 */
type Submit = (user: string, props: object) => string;
/* 再根据函数的声明实现函数 */
const submitHandle: Submit = (user, props) => {
return `提交成功, ${
user}`
// return 123 // 返回一个数字会报错,错误信息如下
// 不能将类型“(user: string, props: object) => number”分配给类型“Submit”。 不能将类型“number”分配给类型“string”。
}
submitHandle('温情key', {
age: 22 });
// submitHandle(123, { age: 22 }); // error 类型“number”的参数不能赋给类型“string”的参数。
3. interface定义函数类型
使用接口可以清晰地定义函数类型
interface AddInt {
(x: number, y: number): number;
}
const add: AddInt = (a, b) => {
return a + b
}
// 不能将类型“(a: number, b: number) => string”分配给类型“AddInt”。
// 不能将类型“string”分配给类型“number”。
// const add: AddInt = (a: number, b: number) => {
// return 'wwww'
// }
函数参数定义
1. 可选参数
可选参数的定义只需要在参数后面加一个 ?
const add = (x: number, y: number, z?: number): number => {
return x + y + ( z ? z : 0 )
}
console.log(add(1 , 2)); // 3
console.log(add(1 , 2, 3)); // 6
可选参数可以是一个或者多个
const add = (x: number, y?: number, z?: number): number => {
return x + ( y ? y : 0 ) + ( z ? z : 0 )
}
console.log(add(1 , 2)); // 3
一旦出现可选参数后面只能跟可选参数
const add = (x: number, y?: number, z: number): number => {
// error 必选参数不能位于可选参数后
return x + ( y ? y : 0 ) + ( z ? z : 0 )
}
2. 默认参数
默认参数只需要给参数赋一个初值
const add = (x, y = 20) => {
console.log(x + y);
}
add(10); // 30
add(10, 70); // 80
当为参数指定了默认参数时,TS会识别默认值推断此参数的类型。在调用函数时,如果实参类型和默认参数类型不一致则会报错
const add = (x, y = 20) => {
console.log(x + y);
}
add(10); // 30
add(10, '70'); // error 类型“string”的参数不能赋给类型“number”的参数。
当然也可以显式的给默认参数设置类型
const add = (x: number, y: number = 20): void => {
console.log(x + y);
}
add(10); // 30
add(10, 60); // 70
3. 剩余参数
剩余参数会被当做个数不限的可选参数。 可以一个都没有,同样也可以有任意个。 编译器会创建参数数组,名字是在 省略号...
后面给定的名字,可以在函数体内使用这个数组。
const add = (...args: number[] ) => {
const res = args.reduce((pre, cur) => {
return pre + cur
})
console.log(res);
}
add(1, 2, 3); // 6
add(10, 20, 30, 50, 90); // 200
函数重载
函数名相同, 而形参不同的多个函数
所谓函数重载就是同一个函数,根据传递的参数不同,会有不同的表现形式。
在JS中, 由于弱类型的特点和形参与实参可以不匹配, 是没有函数重载这一说的 但在TS中, 与其它面向对象的语言就存在此语法
// 需求: 定义一个add函数,它可以接收2个string类型的参数进行拼接,也可以接收2个number类型的参数进行相加
// 重载函数声明
function add (x: string, y: string): string;
function add (x: number, y: number): number;
// 定义函数实现
function add(x: string | number, y: string | number): string | number | undefined {
if(typeof x === 'string' && typeof y === 'string') return x + y;
else if(typeof x === 'number' && typeof y === 'number') return x + y;
}
console.log(add(1, 2)); // 3
console.log(add('温情', 'key')); // 温情key
console.log(add(1, 'key')); // 报错信息如下
// 第 1 个重载(共 2 个),“(x: string, y: string): string”,出现以下错误。
// 类型“number”的参数不能赋给类型“string”的参数。
// 第 2 个重载(共 2 个),“(x: number, y: number): number”,出现以下错误。
// 类型“string”的参数不能赋给类型“number”的参数。
注意: 函数重载只能用 function
来定义,不能使用interface
type
来定义。
边栏推荐
- 香港珠宝大亨,22亿“抄底”佐丹奴
- P4408 [NOI2003] 逃学的小孩(树的直径)
- Is the account opening link of Huatai Securities with low commission safe?
- Is it safe to open an account in the College of Finance and economics? How to open an account?
- 微服务(Microservice)那点事儿
- Specification for fs4061a boost 8.4v charging IC chip and fs4061b boost 12.6V charging IC chip datasheet
- [monitoring] ZABBIX
- go踩坑——no required module provides package : go.mod file not found in current directory or any parent
- P3304 [SDOI2013]直径(树的直径)
- 股票账户佣金怎么调低,炒股佣金怎么调低网上开户安全吗
猜你喜欢
Skills in analyzing the trend chart of London Silver
[IELTS reading] Wang Xiwei reading P4 (matching1)
「运维有小邓」域密码策略强化器
[论文阅读] CarveMix: A Simple Data Augmentation Method for Brain Lesion Segmentation
业务场景功能的继续修改
Every time I look at the interface documents of my colleagues, I get confused and have a lot of problems...
P3304 [SDOI2013]直径(树的直径)
企业公司项目开发好一部分基础功能,重要的事保存到线上第一a
Build your own minecraft server with fast parsing
XML的解析
随机推荐
电力运维云平台:开启电力系统“无人值班、少人值守”新模式
ORB(Oriented FAST and Rotated BRIEF)
ECCV 2022 | Tencent Youtu proposed disco: the effect of saving small models in self supervised learning
The company needs to be monitored. How do ZABBIX and Prometheus choose? That's the right choice!
Introduction to ACM combination counting
JS 将伪数组转换成数组
Microservice
[kotlin] the third day
uniapp微信小程序拿来即用的瀑布流布局demo2(方法二)(复制粘贴即可使用,无需做其他处理)
【路径规划】RRT增加动力模型进行轨迹规划
Is the account opening link of Huatai Securities with low commission safe?
How to reduce the stock account Commission and stock speculation commission? Is it safe to open an online account
Jar batch management gadget
[JS] - [dynamic planning] - Notes
How to save your code works quickly to better protect your labor achievements
uniapp上传头像
青海省国家湿地公园功能区划数数据、全国湿地沼泽分布数据、全国省市县自然保护区
[JS] - [sort related] - Notes
French scholars: the explicability of counter attack under optimal transmission theory
机器人强化学习——Learning Synergies between Pushing and Grasping with Self-supervised DRL (2018)