TypeScript扩展接口时类属性value无法被识别为数组问题

你给泛型参数D设置的默认值是T[]，但这只是默认配置，TS不会默认约束D一定是数组类型——只要使用者实例化类的时候给D传了非数组类型，this.value的类型就是对应的非数组类型，自然不存在length属性，所以TS会抛出类型错误。

有两种常用的修复方案，根据实际业务场景选择即可：

方案1：约束泛型D的类型 #

直接给泛型D添加上数组类型约束，保证不管怎么传参，D一定是数组类型，原有业务代码不需要改动：

// 改动点：给D加extends Array<T>约束
export class InListFilter<T, D extends Array<T> = T[]> extends BaseFilter<T, D> {
    constructor(props: Partial<BaseFilter<T>>) {
        super(props);
    }

    getValue(): string {
        let s: string[] = [];
        if (this.value && this.value.length) {
            for (let v of this.value) {
                v = this.getValueParsed(v);
                s.push(this.enquoted ? `'${v}'` : `${v}`);
            }
        }
        return s && s.length ? s.join(',') : '';
    }

    render(): string {
        let s: string = '';
        if (!this.field || !this.hasValue()) {
            return s;
        }
        return `(${this.field} IN (${this.getValue()}))`;
    }
}

方案2：增加类型收窄判断 #

如果确实有需要允许D为非数组类型的场景，可以在访问length属性前添加数组类型判断，让TS完成类型收窄：

getValue(): string {
    let s: string[] = [];
    // 改动点：增加Array.isArray判断完成类型收窄
    if (this.value && Array.isArray(this.value) && this.value.length) {
        for (let v of this.value) {
            v = this.getValueParsed(v);
            s.push(this.enquoted ? `'${v}'` : `${v}`);
        }
    }
    return s && s.length ? s.join(',') : '';
}

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