TypeScript泛型约束与默认参数妙用技巧

TypeScript泛型约束

什么是泛型约束

在TypeScript中，泛型为我们提供了一种创建可复用组件的强大方式，这些组件可以与不同类型一起工作，而无需在使用每种类型时都进行重复编写。然而，有时我们需要对泛型参数进行一些限制，确保传递给泛型的类型具有某些特定的结构或行为，这就是泛型约束的作用。

泛型约束允许我们指定泛型类型必须满足的条件，从而在编译时捕获错误，提高代码的健壮性。例如，假设我们有一个函数，它接受一个对象和一个键，并返回该对象中对应键的值。如果不使用泛型约束，我们可能会传递任何类型的对象和键，这可能导致运行时错误。通过泛型约束，我们可以确保传递的对象确实包含我们要访问的键。

简单的泛型约束示例

下面是一个简单的例子，展示如何使用泛型约束：

// 定义一个接口，用于约束对象必须包含某个属性
interface HasLength {
    length: number;
}

// 使用泛型约束，确保T类型具有length属性
function printLength<T extends HasLength>(arg: T): void {
    console.log(arg.length);
}

// 正确使用，字符串和数组都具有length属性
printLength('hello'); 
printLength([1, 2, 3]); 

// 错误使用，数字类型没有length属性
// printLength(123); 

在上面的代码中，我们定义了一个HasLength接口，它要求类型必须有一个length属性。然后，我们在printLength函数中使用泛型T，并通过T extends HasLength对T进行约束，这样就确保了传递给printLength函数的参数必须具有length属性。

基于多个类型的泛型约束

有时候，我们需要基于多个类型之间的关系进行泛型约束。例如，假设我们有一个函数，它接受两个对象和一个键，从第一个对象中获取对应键的值，并在第二个对象中查找具有相同值的属性。

interface KeyValuePair {
    [key: string]: any;
}

function findMatchingValue<T extends KeyValuePair, U extends KeyValuePair>(obj1: T, obj2: U, key: keyof T): keyof U | undefined {
    const value = obj1[key];
    for (const k in obj2) {
        if (obj2[k] === value) {
            return k as keyof U;
        }
    }
    return undefined;
}

const obj1 = { name: 'John', age: 30 };
const obj2 = { username: 'JohnDoe', userAge: 30 };
const result = findMatchingValue(obj1, obj2, 'name');
console.log(result); 

在这个例子中，我们定义了KeyValuePair接口来表示具有字符串键和任意值的对象。findMatchingValue函数使用了两个泛型T和U，它们都约束为KeyValuePair类型。这样就确保了obj1和obj2都是符合KeyValuePair结构的对象，从而在函数中可以安全地进行属性访问和比较操作。

泛型约束与类

泛型约束同样适用于类。例如，我们可以创建一个泛型类，该类只能存储满足特定约束的对象。

interface Validatable {
    isValid(): boolean;
}

class Validator<T extends Validatable> {
    private items: T[] = [];

    add(item: T) {
        if (item.isValid()) {
            this.items.push(item);
        }
    }

    getItems(): T[] {
        return this.items;
    }
}

class User implements Validatable {
    constructor(public name: string, public age: number) {}

    isValid(): boolean {
        return this.age > 0 && this.name.length > 0;
    }
}

const userValidator = new Validator<User>();
const user1 = new User('Alice', 25);
const user2 = new User('', 0);

userValidator.add(user1);
userValidator.add(user2);

console.log(userValidator.getItems()); 

在上述代码中，Validator类使用泛型T，并约束T必须实现Validatable接口。这样，Validator类只能添加实现了isValid方法的对象，从而保证了添加到Validator中的对象都是有效的。

泛型约束与函数类型

我们也可以对函数类型的泛型参数进行约束。例如，假设我们有一个函数，它接受一个函数和一个参数，并调用该函数，同时要求传入的函数必须返回一个特定类型的值。

interface ResultType {
    success: boolean;
    message: string;
}

function callFunction<T extends (arg: number) => ResultType>(func: T, arg: number): ResultType {
    return func(arg);
}

function testFunction(arg: number): ResultType {
    return { success: arg > 0, message: arg > 0? 'Positive' : 'Non - positive' };
}

const result = callFunction(testFunction, 5);
console.log(result); 

在这个例子中，callFunction函数的泛型T约束为一个接受number类型参数并返回ResultType类型的函数。这样就确保了传入callFunction的函数具有正确的签名和返回类型，提高了代码的类型安全性。

TypeScript默认参数

什么是默认参数

在TypeScript中，默认参数为函数参数提供了一个默认值。当调用函数时，如果没有传递该参数的值，那么函数将使用默认值。默认参数使得函数的调用更加灵活，同时减少了重复代码。

例如，考虑一个简单的函数，用于计算两个数的和。如果我们经常计算某个数与一个固定值的和，就可以使用默认参数来简化调用。

function addNumbers(a: number, b: number = 10): number {
    return a + b;
}

console.log(addNumbers(5)); 
console.log(addNumbers(5, 20)); 

在上面的代码中，addNumbers函数的b参数有一个默认值10。当调用addNumbers(5)时，由于没有传递b的值，函数将使用默认值10，返回15。当调用addNumbers(5, 20)时，函数将使用传递的20作为b的值，返回25。

默认参数的类型推断

TypeScript会根据默认参数的值来推断其类型。例如：

function greet(name: string = 'Guest'): void {
    console.log(`Hello, ${name}!`);
}

greet(); 
greet('John'); 

在这个例子中，name参数的默认值是字符串'Guest'，因此TypeScript推断name的类型为string。这意味着我们只能传递字符串类型的值给name参数，否则会导致编译错误。

默认参数与剩余参数

默认参数可以与剩余参数一起使用。例如：

function printArgs(arg1: string, ...args: string[] = ['default1', 'default2']): void {
    console.log(arg1);
    args.forEach(arg => console.log(arg));
}

printArgs('first'); 
printArgs('first', 'second'); 

在上面的代码中，printArgs函数接受一个必需的arg1参数和一个剩余参数args。args有一个默认值['default1', 'default2']。当调用printArgs('first')时，args将使用默认值；当调用printArgs('first','second')时，args将是['second']，因为剩余参数会根据实际传递的参数来确定。

默认参数在类方法中的应用

默认参数在类的方法中同样非常有用。例如，我们有一个Rectangle类，其构造函数用于创建矩形对象，并且可以通过一个方法计算矩形的面积，该方法的参数可以有默认值。

class Rectangle {
    constructor(public width: number, public height: number) {}

    calculateArea(factor: number = 1): number {
        return this.width * this.height * factor;
    }
}

const rect = new Rectangle(5, 10);
console.log(rect.calculateArea()); 
console.log(rect.calculateArea(2)); 

在这个例子中，Rectangle类的calculateArea方法的factor参数有一个默认值1。如果调用该方法时不传递factor，则会使用默认值计算面积；如果传递了factor，则会按照传递的值计算面积。

泛型约束与默认参数的结合妙用

泛型约束与默认参数在函数中的结合

在实际开发中，将泛型约束与默认参数结合使用可以实现非常灵活且健壮的代码。例如，我们有一个函数，它接受一个数组和一个转换函数，将数组中的每个元素通过转换函数进行转换，并返回转换后的数组。我们可以使用泛型约束确保转换函数的输入和输出类型与数组元素类型兼容，同时使用默认参数提供一个默认的转换函数。

interface Transformable<T> {
    transform: (value: T) => T;
}

function transformArray<T extends Transformable<T>>(arr: T[], transformFunc: (value: T) => T = (v) => v): T[] {
    return arr.map(transformFunc);
}

class NumberTransformer implements Transformable<number> {
    transform(value: number): number {
        return value * 2;
    }
}

const numbers = [1, 2, 3];
const transformed1 = transformArray(numbers); 
const numberTransformer = new NumberTransformer();
const transformed2 = transformArray(numbers, numberTransformer.transform); 

在上述代码中，Transformable接口定义了一个transform方法，用于约束类型必须具有转换自身的能力。transformArray函数使用泛型T，并约束T实现Transformable<T>接口。transformFunc参数有一个默认值，这个默认值是一个恒等函数，它返回传入的值本身。当调用transformArray(numbers)时，会使用默认的转换函数；当调用transformArray(numbers, numberTransformer.transform)时，会使用NumberTransformer类的transform方法进行转换。

泛型约束与默认参数在类中的结合

在类中结合泛型约束与默认参数也能带来很多好处。例如，我们创建一个泛型类，用于管理具有特定属性的对象集合，并提供一个方法来过滤集合中的对象。我们可以使用泛型约束确保对象具有可用于过滤的属性，同时使用默认参数提供一个默认的过滤条件。

interface Filterable {
    id: number;
}

class ObjectManager<T extends Filterable> {
    private objects: T[] = [];

    addObject(obj: T) {
        this.objects.push(obj);
    }

    filterObjects(filter: (obj: T) => boolean = (obj) => true): T[] {
        return this.objects.filter(filter);
    }
}

class UserObject implements Filterable {
    constructor(public id: number, public name: string) {}
}

const userManager = new ObjectManager<UserObject>();
const user1 = new UserObject(1, 'Alice');
const user2 = new UserObject(2, 'Bob');

userManager.addObject(user1);
userManager.addObject(user2);

const allUsers = userManager.filterObjects(); 
const filteredUsers = userManager.filterObjects(user => user.id > 1); 

在这个例子中，Filterable接口要求类型必须有一个id属性。ObjectManager类使用泛型T，并约束T实现Filterable接口。filterObjects方法的filter参数有一个默认值，这个默认值是一个始终返回true的函数，即默认不进行过滤。当调用userManager.filterObjects()时，会返回所有对象；当调用userManager.filterObjects(user => user.id > 1)时，会返回id大于1的对象。

解决复杂业务场景的应用

在更复杂的业务场景中，比如开发一个数据加载器，它可以从不同的数据源加载数据，并对加载的数据进行处理。我们可以使用泛型约束确保数据源和数据处理逻辑的兼容性，同时使用默认参数提供一些常用的默认处理逻辑。

interface DataSource<T> {
    fetchData(): Promise<T[]>;
}

interface DataProcessor<T> {
    processData(data: T[]): Promise<T[]>;
}

class DataLoader<T> {
    constructor(private dataSource: DataSource<T>, private dataProcessor: DataProcessor<T> = {
        processData: (data) => Promise.resolve(data)
    }) {}

    async loadData(): Promise<T[]> {
        const rawData = await this.dataSource.fetchData();
        return this.dataProcessor.processData(rawData);
    }
}

class JsonDataSource<T> implements DataSource<T> {
    constructor(private url: string) {}

    async fetchData(): Promise<T[]> {
        const response = await fetch(this.url);
        return response.json();
    }
}

class DataCleaner<T extends { name: string }> implements DataProcessor<T> {
    async processData(data: T[]): Promise<T[]> {
        return data.filter(item => item.name.length > 0);
    }
}

const jsonDataSource = new JsonDataSource<{ name: string }>('https://example.com/data.json');
const dataCleaner = new DataCleaner<{ name: string }>();
const dataLoader = new DataLoader<{ name: string }>(jsonDataSource, dataCleaner);
dataLoader.loadData().then(data => console.log(data)); 

在上述代码中，DataSource接口定义了数据获取的方法，DataProcessor接口定义了数据处理的方法。DataLoader类使用泛型T，并接受一个数据源和一个数据处理器。数据处理器有一个默认值，这个默认值是一个简单的处理器，它直接返回传入的数据。JsonDataSource类实现了DataSource接口，用于从JSON数据源获取数据。DataCleaner类实现了DataProcessor接口，用于过滤掉name属性为空的对象。当调用dataLoader.loadData()时，会先从数据源获取数据，然后使用数据处理器进行处理。如果不传递自定义的数据处理器，将使用默认的处理器。

通过将泛型约束与默认参数结合使用，我们可以在TypeScript中创建更加灵活、可维护且类型安全的代码，适用于各种复杂程度的项目。无论是简单的工具函数，还是大型的应用程序架构，这种结合方式都能帮助我们更高效地开发和管理代码。在实际应用中，开发者需要根据具体的业务需求和场景，合理地设计泛型约束和默认参数，以充分发挥它们的优势。例如，在处理不同类型的数据集合操作时，通过泛型约束确保操作的安全性，同时利用默认参数减少重复代码，提高开发效率。在构建大型的软件系统时，这种结合方式可以使各个模块之间的交互更加清晰和健壮，降低维护成本，提升整个系统的稳定性和可扩展性。