TypeScript(十二)泛型、模块

1. 泛型

1.1. 简介

  泛型是一种编程语言特性,允许在定义函数、类、接口等使用占位符来表示类型,而不是具体的类型。

  泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。

  使用泛型的主要目的是为了处理不特定类型的数据,使得代码可以适用于多种类型而不失去类型检查。
泛型的优势:

(1)代码重用 - 可以编写与特定类型你那个无关的通用代码,提高代码的复用性。

(2)类型安全 - 在编译时进行类型检查,避免在运行时出现类型错误。

(3)抽象性 - 允许编写更抽象和通用的代码,适应不同的数据类型和数据结构。

1.2. 泛型标识符

  在泛型中,通常使用一些约定俗成的标识符,比如常见的T、U、V等,但实际上你可以使用任何标识符。

(1)T:代表"Type",是最常用的泛型类型参数名。

javascript 复制代码
function identity<T>(arg: T): T {
    return arg;
}

(2)K、V用于标识键(key)和值(Value)的泛型类型参数。

javascript 复制代码
interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

(3)E:用于表示数组元素的泛型类型参数

javascript 复制代码
function printArray<E>(arr: E[]): void {
    arr.forEach(item => console.log(item));
}

(4)R:表示函数返回值的泛型类型参数

javascript 复制代码
function printArray<E>(arr: E[]): void {
    arr.forEach(item => console.log(item));
}

(5)U、V:通常用于表示第二、第三个泛型类型参数

javascript 复制代码
function combine<U, V>(first: U, second: V): string {
    return `${first} ${second}`;
}

1.3. 泛型函数

  使用泛型来创建一个可以处理不同类型的函数。

实例:

javascript 复制代码
function identity<T>(arg: T): T {
    return arg;
}
// 使用泛型函数
let result = identity<string>("Hello");
console.log(result); // 输出: Hello
let numberResult = identity<number>(42);
console.log(numberResult); // 输出: 42

  解析: 以上例子中,identity 是一个泛型函数,使用 表示泛型类型。它接受一个参数 arg 和返回值都是泛型类型 T。在使用时,可以通过尖括号 <> 明确指定泛型类型。第一个调用指定了 string 类型,第二个调用指定了 number 类型。

1.4. 泛型接口

  可以使用泛型来定义接口,使接口的成员能够使用任意类型:

javascript 复制代码
// 基本语法
interface Pair<T, U> {
    first: T;
    second: U;
}
// 使用泛型接口
let pair: Pair<string, number> = { first: "hello", second: 42 };
console.log(pair); // 输出: { first: 'hello', second: 42 }

  解析: 这里定义了一个泛型接口 Pair,它有两个类型参数 T 和 U。然后,使用这个泛型接口创建了一个对象 pair,其中 first 是字符串类型,second 是数字类型。

1.5. 泛型类

  泛型也可以应用于类的实例变量和方法:

javascript 复制代码
// 基本语法
class Box<T> {
    private value: T; 
    constructor(value: T) {
        this.value = value;
    }
    getValue(): T {
        return this.value;
    }
}
// 使用泛型类
let stringBox = new Box<string>("TypeScript");
console.log(stringBox.getValue()); // 输出: TypeScript

  解析: 在这个例子中,Box 是一个泛型类,使用 表示泛型类型。构造函数和方法都可以使用泛型类型 T。通过实例化 Box,我们创建了一个存储字符串的 Box 实例,并通过 getValue 方法获取了存储的值。

1.6. 泛型与默认值

  可以给泛型设置默认值,使得在不指定类型参数时能够使用默认类型:

javascript 复制代码
// 基本语法
function defaultValue<T = string>(arg: T): T {
    return arg;
}
// 使用带默认值的泛型函数
let result1 = defaultValue("hello"); // 推断为 string 类型
let result2 = defaultValue(42);      // 推断为 number 类型

  说明:这个例子展示了带有默认值的泛型函数。函数 defaultValue 接受一个泛型参数 T,并给它设置了默认类型为 string。在使用时,如果没有显式指定类型,会使用默认类型。在例子中,第一个调用中 result1 推断为 string 类型,第二个调用中 result2 推断为 number 类型。

2. 模块

2.1. 说明

  模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

  两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

2.2. 模块导出使用关键字export 关键字,语法格式:

javascript 复制代码
// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

  要在另外一个文件使用该模块就需要使用 import 关键字来导入:

javascript 复制代码
import someInterfaceRef = require("./SomeInterface");

实例:

javascript 复制代码
IShape.ts 文件代码:
/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}
Circle.ts 文件代码:
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}
Triangle.ts 文件代码:
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
estShape.ts 文件代码:
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
 
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
 
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

执行结果:

Cirlce is drawn (external module)

Triangle is drawn (external module)

相关推荐
IT_陈寒9 小时前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
kyriewen9 小时前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
WebInfra10 小时前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州10 小时前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang45311 小时前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家12 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Awu122712 小时前
⚡从零开发 Agent CLI(四):给 CLI 装上"LLM 引擎"
typescript·ai编程·claude
Asize12 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙12 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
Mahut12 小时前
我用 Electron + FFmpeg 做了一个本地视频处理工作站 ClipForge
前端·ffmpeg·electron