如何通过方法装饰器缩小TypeScript类属性的类型范围？

我正在创建一个类，其中某属性为联合类型，会在方法调用前通过方法装饰器修改其类型。请问能否实现：当方法使用特定装饰器时，该方法内部的该属性类型被缩小？

示例代码：

function defaultName<This extends Foo & {name: string}, Args extends any[], Return>(
    target: (this: This, ...args: Args) => Return,
    context: ClassMethodDecoratorContext
) {
    return function (this: This, ...args: Args): Return {
        if (!this.name) this.name = 'Foo';
        return target.call(this, ...args)
    }
}

class Foo {
    name: string | null;
    constructor() {
        this.name = null;
    }

    @defaultName // 应用该装饰器后，希望this.name类型缩小为string
    greet() {
        console.log('Hey, Im', this.name.toUpperCase()) // 错误：this.name可能为null
    }
}

我尝试使用Foo & {name: string}来实现，但没有效果。

解决方案 #

TypeScript装饰器本身不会自动修改被装饰方法的this类型，但可以通过调整装饰器的类型定义，让TypeScript识别到方法内部的属性已被缩小范围。

方案一：显式声明方法的this类型 #

type EnsureName<T> = T & { name: string };

function defaultName<
    T extends { name?: string | null },
    Args extends any[],
    Return
>(
    target: (this: EnsureName<T>, ...args: Args) => Return,
    context: ClassMethodDecoratorContext<T, (this: EnsureName<T>, ...args: Args) => Return>
) {
    return function (this: T, ...args: Args): Return {
        // 运行时确保name不为null
        if (!this.name) this.name = 'Foo';
        return target.call(this as EnsureName<T>, ...args);
    };
}

class Foo {
    name: string | null;
    constructor() {
        this.name = null;
    }

    @defaultName
    greet(this: EnsureName<Foo>) { // 明确方法的this类型
        console.log('Hey, Im', this.name.toUpperCase()); // 无类型错误
    }
}

方案二：通过装饰器自动推导this类型 #

如果不想在每个方法上手动声明this类型，可以通过类型断言让装饰器修改方法的类型签名：

function defaultName<
    T extends { name?: string | null },
    Args extends any[],
    Return
>(
    target: (this: T, ...args: Args) => Return,
    context: ClassMethodDecoratorContext<T>
): (this: T, ...args: Args) => Return {
    const wrapped = function (this: T, ...args: Args): Return {
        if (!this.name) this.name = 'Foo';
        return target.call(this as T & { name: string }, ...args);
    };

    // 断言被装饰后的方法this已确保name为string
    return wrapped as unknown as (this: T & { name: string }, ...args: Args) => Return;
}

class Foo {
    name: string | null;
    constructor() {
        this.name = null;
    }

    @defaultName
    greet() {
        console.log('Hey, Im', this.name.toUpperCase()); // 无类型错误
    }
}

核心原理 #

两种方案都是通过类型交叉（T & { name: string }）创建确保属性类型的新类型，再通过类型断言或显式声明，让TypeScript在方法内部识别到name已经是string类型，同时在运行时通过装饰器代码确保属性不为null，实现类型安全与运行时逻辑的统一。

内容的提问来源于stack exchange，提问作者Khaled