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 是泛型类型参数,它表示一个占位符,具体的类型将在使用时提供。泛型类型提供了一种更通用、可重用的方式来定义函数、类、接口等,使得代码更灵活,能够适应不同的数据类型。

相关推荐
Dragon Wu10 小时前
Electron Forge集成React Typescript完整步骤
前端·javascript·react.js·typescript·electron·reactjs
We་ct1 天前
LeetCode 56. 合并区间:区间重叠问题的核心解法与代码解析
前端·算法·leetcode·typescript
程序猿阿伟1 天前
《TypeScript中Protobuf到运行时类型安全的转换指南》
javascript·安全·typescript
We་ct1 天前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
阿蒙Amon2 天前
TypeScript学习-第10章:模块与命名空间
学习·ubuntu·typescript
VT.馒头2 天前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
AAA阿giao2 天前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
hedley(●'◡'●)2 天前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
百锦再2 天前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
小杨同学呀呀呀呀2 天前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue