如何让TypeScript类型兼容自定义类与原始类型并解决签名冲突

要实现同时支持自定义类特性、原始类型操作，且冲突签名优先自定义类的类型，核心是利用valueOf方法实现原始类型兼容性+交叉类型覆盖冲突属性，以下是具体方案：

关键思路 #

1. 给自定义类添加valueOf方法，让实例在进行原始操作（比较、运算等）时自动转换为对应原始值，TypeScript会自动识别这种兼容性。
2. 使用Omit工具类型移除原始类型中与自定义类冲突的属性，再通过交叉类型合并，确保自定义类的签名优先被识别。

数字类型实现示例 #

export class MyNumber {
    value: MyNumberType;
    constructor(v: MyNumberType) {
        this.value = v;
    }
    test(n: MyNumberType) { return n; }
    // 实现valueOf，让实例可被当作number进行原始操作
    valueOf(): number {
        return typeof this.value === 'number' ? this.value : this.value.valueOf();
    }
}

// 交叉类型确保自定义方法优先，同时兼容纯number
export type MyNumberType = (Omit<number, keyof MyNumber> & MyNumber) | number;

const myNumber1 = new MyNumber(5);
myNumber1 < 2; // 编译通过，运行时返回false
const num: MyNumberType = 10;
num.test(20); // 编译通过

字符串类型实现示例 #

针对length属性与方法的冲突场景：

export class MyString {
    value: MyStringType;
    constructor(v: MyStringType) {
        this.value = v;
    }
    // 自定义length方法，覆盖string的length属性
    length(): number {
        return typeof this.value === 'string' ? this.value.length : this.value.length();
    }
    // 实现valueOf，让实例可被当作string进行原始操作
    valueOf(): string {
        return typeof this.value === 'string' ? this.value : this.value.valueOf();
    }
    // 自定义目标语言的get方法（对应TS的charAt）
    get(index: number): string {
        const str = this.valueOf();
        return str.charAt(index);
    }
}

// 移除string的length属性后与MyString交叉，确保length()方法优先
export type MyStringType = (Omit<string, 'length'> & MyString) | string;

// 你的List示例
class MyList<T> {
    private items: T[] = [];
    add(item: T) { this.items.push(item); }
    map<U>(fn: (item: T, index: number) => U): U[] {
        return this.items.map(fn);
    }
}

const x = new MyList<MyStringType>();
x.add("test");
x.add(new MyString("demo"));
x.map((a, b) => b.length()); // 编译通过，返回[4, 4]

核心原理说明 #

• valueOf方法：JavaScript会在原始类型操作时自动调用该方法，TypeScript会基于此推断出实例与原始类型的兼容性，无需显式类型转换。
• Omit交叉类型：当原始类型与自定义类存在同名成员时，用Omit删除原始类型的冲突成员，再交叉合并，TypeScript会优先识别自定义类的成员。

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