TypeScript学习记录

函数签名

函数签名指的是函数的声明或者定义中包含的信息,主要包括函数的参数类型、参数个数、返回类型等。函数签名定义了函数的形状,是函数类型的一部分。

在 TypeScript 或者 JavaScript 中,函数签名包括以下几个要素:

  1. 参数列表: 指定了函数接受的参数的数量和类型。

  2. 返回类型: 指定了函数调用后返回的值的类型。

  3. 函数名: 表示函数的名称。

下面是一个简单的 TypeScript 函数签名的例子:

复制代码
// 函数签名
type AddFunction = (a: number, b: number) => number;

// 使用函数签名定义具体的函数
const add: AddFunction = (x, y) => x + y;

// 调用具体的函数
const result = add(3, 5);
console.log(result); // 输出: 8

在这个例子中:

  • AddFunction 是一个函数类型,它的函数签名表示这个函数接受两个参数,都是 number 类型,返回值是一个 number 类型。

  • add 是一个使用了 AddFunction 类型的具体函数,它接受两个参数并返回它们的和。

函数签名有助于提供类型安全性,因为 TypeScript 可以在编译时检查函数的使用是否符合其定义。这也是 TypeScript 中强大的类型系统的一部分。

泛型类型

泛型类型是一种在编程中使用的抽象类型,它允许你定义一个类型占位符,在实际使用时再指定具体的类型。在 TypeScript 中,泛型类型可以应用于函数、类、接口等,提供更灵活和可重用的代码结构。

泛型类型使用尖括号 <T> 来表示,其中 T 是一个占位符,代表类型参数。你可以在定义泛型类型时使用 T 或其他合适的字母或单词。以下是一些示例:

①泛型函数类型

复制代码
type IdentityFunction<T> = (arg: T) => T;

// 使用泛型类型
const echo: IdentityFunction<string> = (arg) => arg;
const duplicate: IdentityFunction<number> = (arg) => arg * 2;

②泛型类类型:

复制代码
class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

// 使用泛型类
const stringBox = new Box<string>("Hello");
console.log(stringBox.getValue()); // 输出: Hello

const numberBox = new Box<number>(42);
console.log(numberBox.getValue()); // 输出: 42

③泛型接口类型:

复制代码
interface Pair<T, U> {
    first: T;
    second: U;
}

// 使用泛型接口
const pair1: Pair<number, string> = { first: 1, second: "two" };
const pair2: Pair<string, boolean> = { first: "hello", second: true };

这些例子中的 T 是泛型类型参数,它表示一个占位符,具体的类型将在使用时提供。泛型类型提供了一种更通用、可重用的方式来定义函数、类、接口等,使得代码更灵活,能够适应不同的数据类型。

相关推荐
华仔啊6 分钟前
别再写 TypeScript enum了!新枚举方式让 bundle 瞬间小20%
javascript·typescript
子兮曰5 小时前
🚀彻底掌握异步编程:async/await + Generator 深度解析与20个实战案例
前端·javascript·typescript
知否技术6 小时前
别再踩坑了!这份 Vue3+TypeScript 项目教程,赶紧收藏!
前端·typescript
@AfeiyuO13 小时前
分类别柱状图(Vue3)
typescript·vue·echarts
一只小风华~13 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
烛阴21 小时前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
叫我阿柒啊1 天前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot
Spider_Man1 天前
打造属于你的前端沙盒 🎉
前端·typescript·github
定栓1 天前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
一只小风华~1 天前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架