高校网站建设,市场营销策略是什么,做建筑设计网站,上海十大网站排名大家好#xff0c;我是王天~
这篇文章是 ts入门指南系列中第6 篇#xff0c;主要讲解ts中的 函数、枚举、别名应用~ 如有不对的地方 欢迎留言反馈哈
函数
在TypeScript中#xff0c;可选参数和默认参数、剩余参数以及函数重载可以帮助我们更灵活地定义和使用函数。
1、可…大家好我是王天~
这篇文章是 ts入门指南系列中第6 篇主要讲解ts中的 函数、枚举、别名应用~ 如有不对的地方 欢迎留言反馈哈
函数
在TypeScript中可选参数和默认参数、剩余参数以及函数重载可以帮助我们更灵活地定义和使用函数。
1、可选参数和默认参数
可选参数允许我们在调用函数时省略一些参数而默认参数为函数的参数提供了默认值。
举个例子假设我们有一个函数greet用于问候接受一个名称参数和一个可选的消息参数
function greet(name: string, message?: string) {if (message) {console.log(Hello, ${name}! ${message});} else {console.log(Hello, ${name}!);}
}当我们调用这个函数时可以只传递名称参数而可选的消息参数可以省略
greet(Alice); // 输出Hello, Alice!如果我们想要提供消息参数可以在调用时传递它
greet(Bob, How are you?); // 输出Hello, Bob! How are you?此时函数内部会打印带有消息的完整问候语。可选参数和默认参数可以使函数使用更加方便和灵活。
2、剩余参数
剩余参数允许我们在函数中接受不定数量的参数并将它们作为数组在函数内部使用。
举个例子我们有一个函数sum用于计算一组数字的总和
function sum(...numbers: number[]) {let total 0;for (let number of numbers) {total number;}return total;
}我们可以传递任意数量的参数给函数并且函数内部会将这些参数相加并返回结果
console.log(sum(1, 2, 3)); // 输出6
console.log(sum(4, 5, 6, 7, 8)); // 输出30剩余参数使用三个点...前缀来表示它将多个参数收集到一个数组中方便在函数内部进行处理。这样我们可以更便捷地传递和处理不定数量的参数。
3、重载
我们在js中总是不经意间使用函数重载根据不同的参数类型或个数来执行不同的逻辑这就是函数重载。
它在类型检查和类型推断方面提供了更强大的功能。
下面例子展示了如何使用函数重载来实现一个根据参数的不同选择执行不同逻辑的函数
function formatData(data: string): string;
function formatData(data: number): number;
function formatData(data: string | number): string | number {if (typeof data string) {return data.toUpperCase();} else if (typeof data number) {return data.toFixed(2);}
}const result1 formatData(hello); // 返回类型为 string结果为 HELLO
const result2 formatData(3.14159); // 返回类型为 number结果为 3.14上述例子中我们定义了一个名为 formatData 的函数它接受一个参数 data可以是字符串或数字类型。通过函数重载我们提供了两个函数类型定义第一个重载接受字符串参数并返回字符串第二个重载接受数字参数并返回数字。在函数体实现中根据不同的参数类型执行不同的逻辑操作。
通过使用函数重载我们可以在类型安全的环境中根据参数类型提供不同的实现提高代码的可靠性和可读性。这对于需要根据参数进行不同处理的场景非常有用比如解析不同类型的输入数据、根据参数类型进行计算等等
枚举
1. 简介
在 TypeScript 中枚举Enum是一种定义常量的方式可以用简洁、可读性强的方式定义一组命固定集合的值常量。
在 JavaScript 中在没有枚举语言特性的情况下常常使用以下方法来表示一组常量 使用命名的变量或常量。
const RED red;
const GREEN green;
const BLUE blue;这种方式可能容易出错因为限制了变量的作用域而且可能会有命名冲突或拼写错误等问题。 使用简单的对象字面量。
const Colors {RED: red,GREEN: green,BLUE: blue
};使用对象字面量可以提供一些命名空间的支持但并不能限制变量值的修改这意味着你仍然可以通过赋值操作改变枚举值。
这就是 TypeScript 中枚举的作用所在它提供了一种更强大、更安全的方式来定义一组有限的常量。
枚举在 TypeScript 中的优势和解决了 JavaScript 中的一些痛点包括 类型安全性枚举在 TypeScript 中是具有类型的编译器可以在编译时进行类型检查确保只使用枚举中定义的值。 命名空间和作用域枚举在一定程度上提供了命名空间的支持可以更好地组织和管理常量集合并且不会发生命名冲突。 可读性通过使用枚举可以直观地了解代码中某个值的含义提高了代码的可读性和可维护性。 自文档化枚举可以作为文档的一部分提供了一个可供其他开发人员查阅的可扩展的集合。
总之TypeScript 中的枚举提供了一种更加结构化和类型安全的方式来表示固定集合的值并解决了 JavaScript 中使用常量时的一些问题。
2. 基本用法
枚举的基本用法是定义一个枚举类型然后使用它来声明变量或函数参数。下面是一个基本的示例
// 定义一个表示颜色的枚举
enum Color {Red,Green,Blue
}// 使用枚举类型声明变量
let myColor: Color Color.Green;
console.log(myColor); // 输出: 1在这个例子中我们定义了一个枚举类型 Color它包含了三个成员Red、Green 和 Blue。
默认情况下枚举成员的值从 0 开始自动递增所以 Red 的值是 0Green 的值是 1Blue 的值是 2。
我们可以使用枚举类型来声明变量 myColor并将它的值设置为 Color.Green。最后我们打印了 myColor 的值结果是 1。
3. 常数项和计算所得项
在枚举中成员可以是常数项或计算所得项。
常数项是声明枚举时就已经指定好的值这些值不能被修改。如果没有给常数项赋值它们将按照从 0 开始的顺序递增。
计算所得项是根据表达式在运行时计算出的值可以用于根据之前定义的常数项进行计算。计算所得项必须在表达式中使用不能直接赋值给其他成员。
以下是一个示例演示了常数项和计算所得项的用法
enum Direction {Up, // 常数项默认值为 0Down, // 常数项默认值为 1Left 10, // 常数项指定具体值为 10Right Left 1 // 计算所得项值为 11Left 的值加 1
}console.log(Direction.Up); // 输出: 0
console.log(Direction.Left); // 输出: 10
console.log(Direction.Right); // 输出: 11这个例子中Direction 枚举包含了四个成员。
Up 和 Down 是常数项默认情况下它们的值分别是 0 和 1。Left 是一个常数项我们明确地将它的值设置为 10。Right 是一个计算所得项它的值是 Left 1即 10 1结果是 11。
4. 常数枚举
常数枚举是一种特殊类型的枚举在编译时会被删除并且对枚举成员的引用会被替换为具体的值。常数枚举可以在一些性能优化和减少代码量的情况下使用。
下面是一个示例展示了常数枚举的用法
const enum Size {Small,Medium,Large
}function printSize(size: Size): void {console.log(size);
}printSize(Size.Small); // 编译后会直接替换为具体的值在这个例子中我们使用 const enum 关键字定义了一个常数枚举 Size它包含三个成员。
printSize 函数接受一个参数 size类型为 Size 枚举。在函数体内我们打印了 size 的值。由于 Size 是一个常数枚举在编译时会被直接替换为具体的值。
所以当我们调用 printSize(Size.Small) 时编译后的代码将直接打印 0。
5. 实战开发案例
让我们以一个实战开发案例来综合应用学到的 TypeScript 枚举知识。
假设你正在开发一个游戏游戏中有不同种类的角色每个角色都有不同的属性。我们可以使用枚举来表示不同种类的角色以及它们的属性。
以下是一个示例代码
enum MonsterType {Goblin,Orc,Troll
}interface Monster {type: MonsterType;name: string;health: number;attack: number;
}function createMonster(monsterType: MonsterType, name: string): Monster {let monster: Monster;switch (monsterType) {case MonsterType.Goblin:monster { type: monsterType, name, health: 10, attack: 5 };break;case MonsterType.Orc:monster { type: monsterType, name, health: 20, attack: 10 };break;case MonsterType.Troll:monster { type: monsterType, name, health: 30, attack: 15 };break;default:throw new Error(未知的角色类型);}return monster;
}const goblin createMonster(MonsterType.Goblin, 格鲁皮);
console.log(goblin);在这个案例中我们定义了一个枚举类型 MonsterType 来表示不同种类的角色。
别名
在 TypeScript 中type 关键字用于创建类型别名Type Aliases。类型别名允许你为一个具体的类型或类型组合定义一个名称以便在代码中重复使用。
type 的作用有以下几个方面 类型复用 通过类型别名你可以将一个复杂的类型定义为一个名称然后在需要使用该类型的地方直接使用该名称。这有助于提高代码的可读性和可维护性。
type User {name: string;age: number;
};type Callback (data: User) void;function fetchData(callback: Callback) {// ...
}在上面的例子中通过类型别名 User 和 Callback 分别定义了一个用户对象类型和一个回调函数类型然后在 fetchData 函数中使用了这两个类型别名。 类型组合 类型别名还可以用于组合现有的类型来创建新的类型。这可以通过交叉类型Intersection Types和联合类型Union Types来实现。
type Point {x: number;y: number;
};type Color red | green | blue;type ColoredPoint Point { color: Color };type Shape Square | Circle;interface Square {kind: square;size: number;
}interface Circle {kind: circle;radius: number;
}在上述代码中ColoredPoint 类型通过交叉类型将 Point 类型和包含 color 属性的对象类型组合而成Shape 类型通过联合类型将 Square 和 Circle 接口组合而成。 类型推导Type Inference 当你使用类型别名初始化变量时TypeScript 可以推导变量的类型并将其视为该类型别名所代表的类型。
type Point {x: number;y: number;
};const origin: Point { x: 0, y: 0 };在上面的例子中通过类型别名 Point 定义了一个坐标点类型然后通过赋值给 origin 变量TypeScript 推导出 origin 的类型为 Point。
类型别名的使用使得 TypeScript 中的类型定义更加灵活和可维护。通过使用类型别名你可以更好地组织和管理代码中的复杂类型提高代码的可读性和可维护性。
此外类型别名还可以与其他 TypeScript 的高级类型特性如泛型、条件类型等结合使用进一步增强类型系统的能力。
type vs interface
表示类型
类型别名type是一个定义别名的工具可以将多个类型组合起来形成一个新类型。比如特定的对象结构联合类型、函数类型等、可以表示非对象类型
可以应用于以下数据类型 基本类型如字符串、数字、布尔值等 联合类型Union Types 交叉类型Intersection Types 元组Tuple 函数类型Function Types 对象类型Object Types 类型字面量Type Literals 类型别名的自身引用Recursive Type Aliases
接口interface主要用于定义对象的形状和结构只能表示对象类型 对象类型Object Types 类类型Class Types
继承状态 type 不可继承 interface可以继承 class 、interface、type
如果喜欢或者 有所启发欢迎 star对作者也是一种鼓励。
