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)

相关推荐
i_am_a_div_日积月累_23 分钟前
前端路由缓存实现
前端·javascript·vue.js
咪库咪库咪41 分钟前
异步js和http请求
前端
厨猿加加41 分钟前
FlatList 在 React Native 的最佳实践
前端·react native
用户28800074867442 分钟前
前端连接VNC(无需后端)的完整教程
前端
郝某人一生平安42 分钟前
前端 Word 模板参入特定数据 并且下载
前端·vue.js
jaffees44 分钟前
自定义多级联动选择器(uni-app)
前端
_一条咸鱼_1 小时前
深入剖析 Vue 过滤器模块(十三)
前端·javascript·面试
独立开阀者_FwtCoder1 小时前
一口气讲清楚:LLM、MCP、EMB
前端·javascript·人工智能
蔓越莓1 小时前
JS实现css响应式布局方案
前端
林夕11201 小时前
Node.js Web开发进阶:Stream、HTTP模块与文件上传全解析
前端·node.js·全栈