TypeScript系列学习笔记-函数(方法)function

函数简介:函数是JS应用程序的基础。 它帮助你实现抽象层,模拟类,信息隐藏和模块。 在TS里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义 行为的地方。 TS为JS函数添加了额外的功能,让我们可以更容易地使用。

函数分类:和JS一样,TS函数可以创建命名函数和匿名函数;语法:声明关键字,function

简单回顾,JS中函数的定义:

上述函数定义在TS中怎么实现呢,其实一样的,在TS中添加了类型定义(TS本质是JS,上述代码在TS中也是完全可以的):


function 在JS中也属于数据类型,TS中同样,再次将上述代码在TS中实现完整形式:


在TS中完整定义函数类型let 声明变量 add3(委托和 C#中委托类似) ,通过符号"=>"标识函数返回类型,同样add3会根据后面的值推断类型,需要接收一个函数(此处匿名函数)类型。

关于推断类型,可将上述代码再次简化,实例如下:


当符号"="左边声明变量add4时,指明了参数数据类型和函数返回值类型,而符号"="右边的函数类型没有指明,TS编译器会自动识别出类型。

注:TS中完整函数定义,包含两部分:参数类型和返回值类型当写出完整函数类型的时候,这两部分都是需要的。当函数无返回值时,也必须指定返回值类型为 void而不能留空。实例代码如下:


添加默认值,在声明函数的形参中赋值:

//添加默认值
let sayHi2 = function (n:string ="hello") {
    return n+",欢迎来到TypeScript的世界!";
}
alert(sayHi2()); //使用默认值hello
alert(sayHi2("张三")); //为形参n赋值张三

可选参数使用符号"?:"标识:

//添加可选参数(带默认值)
let sayHi3: (name?: string) => string = function (n="hello") {
    return n+",欢迎来到TypeScript的世界!";
}
alert(sayHi3()); //行参name可选
alert(sayHi3("李四"));//为形参name赋值李四

可变参数组,使用符号"...变量名:Array<数据类型>":


或者使用符号"...变量名:数组":

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
//调用
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

总结:

1.方法是JS中的一个特殊的对象;

2.方法分为命名方法和匿名方法;

3.方法属于数据类型;

4.方法参数(形参)可以定义默认值;

5.方法参数(行参)可以使用符号"?:"去定义可选参数或可选参数组;

6.方法参数(形参)可以使用符号"..."去定义可变参数组;

TypeScript 作为 JavaScript,通过引入类型系统、泛型、接口等特性,为前端开发带来了更高的类型安全性与代码可维护性。对于初学者而言,掌握其基础知识和使用方法是迈向高效开发的第一步。 ### 类型系统基础 TypeScript 的核心在于其强大的类型系统,包括基本类型(如 `number`、`string`、`boolean`)、数组类型、元组类型、枚举类型等。例如,可以显式地声明变量的类型: ```typescript let age: number = 25; let name: string = "Alice"; ``` 此外,还可以使用联合类型(Union Types)来表示一个值可以是几种类型之一: ```typescript let id: number | string; id = 123; // 合法 id = "abc"; // 合法 ``` ### 接口与类型别名 TypeScript 提供了 `interface` 和 `type` 两种方式来定义自定义类型。`interface` 更适合用于描述对象的形状,而 `type` 则适用于定义联合类型或更复杂的类型组合。例如: ```typescript interface User { name: string; age: number; } type ID = number | string; ``` 两者都可以实现类型定义,但在某些场景下选择其中之一更为合适。比如,`interface` 支持继承和实现,适合定义类的结构;而 `type` 更加灵活,可以用于定义联合类型。 ### 泛型 泛型允许在定义函数、接口或类时,不预先指定具体的数据类型,而是在使用时再指定。这种机制提高了代码的复用性和灵活性。例如,定义一个通用的数组函数: ```typescript function identity<T>(arg: T): T { return arg; } let output = identity<string>("Hello"); // 返回类型为 string ``` ### Vue 3 中的 TypeScript 使用 在 Vue 3 中,TypeScript 可以与 Composition API 结合使用,提供更强大的类型推导能力。例如,在组件中使用 `ref` 和 `defineComponent`: ```typescript import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const message = ref('Hello, Vue with TypeScript!'); return { message }; } }); ``` 通过显式指定泛型参数,可以确保类型的安全性。例如,声明一个字符串数组: ```typescript const list = ref([] as string[]); ``` ### 实战建议 1. **快速掌握核心**:建议在 2 小时内通读基础类型、接口、泛型以及 Vue 3 组件的 `props` 和 `emits` 类型声明。 2. **实战开发**:使用 Vite 创建 Vue 3 + TypeScript 项目,实现一个带表单验证的组件,结合 `ref`、`computed` 和类型断言。 3. **深入生态**:学习 Vue Router 和 Pinia 的 TypeScript 用法,完成一个简单的单页应用(如博客列表 + 用户状态管理)。 ### 学习资源推荐 - **官方文档**:TypeScript 官方文档和 Vue 3 + TypeScript 官方指南是权威的学习资料。 - **工具链**:TypeScript Playground 可用于在线调试 TypeScript 代码,而 Vue Language Server 是 VSCode 中 Vue + TypeScript 的最佳插件。 通过以上内容的学习和实践,可以快速上手 TypeScript,并在实际项目中应用其特性,提升代码质量和开发效率[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChaITSimpleLove

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值