「前端+鸿蒙」鸿蒙应用开发-TS函数

在 TypeScript 中,函数是一等公民,这意味着函数可以作为参数传递、作为其他函数的返回值,甚至可以赋值给变量。TypeScript 为 JavaScript 的函数增加了类型系统,使得函数的参数和返回值都具有明确的类型。

TS快速入门-函数

基本函数类型注解

在 TypeScript 中,你可以为函数的参数和返回值指定类型:

typescript 复制代码
// 指定参数类型和返回类型
function add(x: number, y: number): number {
    return x + y;
}

let result = add(10, 20); // result 被推断为 number 类型
函数类型别名

你可以为函数定义类型别名,这在处理复杂的回调函数时非常有用:

typescript 复制代码
// 函数类型别名
type StringProcessor = (input: string) => string;

// 使用类型别名
function toUpperCase(str: string): string {
    return str.toUpperCase();
}

let myStringProcessor: StringProcessor = toUpperCase;
可选参数和默认值

TypeScript 允许你定义可选参数和带有默认值的参数:

typescript 复制代码
function greet(name: string, message: string = "Hello"): string {
    return `${message}, ${name}!`;
}

console.log(greet("TypeScript")); // 使用默认消息
console.log(greet("TypeScript", "Hi")); // 使用指定消息
剩余参数

当函数接受不确定数量的参数时,可以使用剩余参数语法:

typescript 复制代码
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10
箭头函数

TypeScript 支持 ES6 的箭头函数语法,并且可以很好地与类型系统结合:

typescript 复制代码
let addWithArrow = (x: number, y: number): number => x + y;
泛型函数

泛型允许你编写可在多种类型上工作的函数,而不需要对函数进行多次重写:

typescript 复制代码
function identity<T>(arg: T): T {
    return arg;
}

let outputString: string = identity<string>("myString");
let outputNumber: number = identity(123);

示例代码

以下是一个使用 TypeScript 编写的简单鸿蒙应用示例,演示了函数的基本用法:

typescript 复制代码
// 函数类型别名示例
type StringTransformer = (input: string) => string;

// 定义一个转换字符串的函数
function reverseString(input: string): string {
    return input.split('').reverse().join('');
}

// 使用函数类型别名
let reverse: StringTransformer = reverseString;

// 可选参数示例
function getGreeting(name: string, message: string = "Hello"): string {
    return `${message}, ${name}!`;
}

// 剩余参数示例
function calculateTotal(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
}

// 箭头函数和泛型函数示例
let processAndLog = <T>(value: T, processor: (input: T) => T): void => {
    let result = processor(value);
    console.log(`Processed value: ${result}`);
};

// 使用示例
let greeting = getGreeting("TypeScript"); // 使用默认消息
let total = calculateTotal(1, 2, 3, 4, 5); // 计算总和

// 泛型函数的使用
processAndLog("TypeScript", reverse); // 将字符串反转并记录

console.log(greeting); // 输出 "Hello, TypeScript!"
console.log(total); // 输出 15

TypeScript 中函数的多种用法,包括类型注解、函数类型别名、可选参数、剩余参数、箭头函数和泛型函数。这些特性使得 TypeScript 成为开发大型应用程序时的一个强大工具,因为它提供了更好的类型检查和代码可维护性。

相关推荐
万少21 分钟前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波00737 分钟前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
云端漫步19871 小时前
HarmonyOS 互动卡片(Live Form)入门指南:双态架构与场景动效全景解析
华为·架构·harmonyos
Brown.alexis1 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝2 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
M-Robots echo3 小时前
安全机制架构解析:M-Robots 分层安全体系,筑牢机器人设备运行底座
机器人·ros·鸿蒙·开源社区·m-robots
计算机魔术师3 小时前
新兴多智能体系统的模式与问题
前端
用户059540174463 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
满栀5854 小时前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript
一拳不是超人4 小时前
DeepSeek Harness 为什么敢说"一切皆插件"?拆透 Cordis 引擎的五大核心机制
前端·人工智能·agent