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 类型推断完全指南
前端·javascript·typescript
濮水大叔16 小时前
这个Database Transaction功能多多,你用过吗?
typescript·node.js·nestjs
Ratten16 小时前
06.TypeScript 元组类型、枚举类型
typescript
CptW17 小时前
字节面试题:实现任务调度器(Scheduler)
面试·typescript
Ratten17 小时前
04.TypeScript 函数类型
typescript
烛阴1 天前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
Orange3015111 天前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
Ratten2 天前
03.TypeScript 常见泛型工具详解
typescript
烛阴2 天前
TypeScript 函数重载入门:让你的函数签名更精确
前端·javascript·typescript