Question

我一起使用这些工具：

打字稿
咕嘟咕嘟
咕嘟咕嘟-进样

我试图执行以下操作：

module My {
    interface IGulpInjectable extends string { // << Problem here!
        [gulp_inject: string] : string;
    }

    export class Cache {
        private items: { [key: string] : IGulpInjectable };

        constructor() {
            this.items = {
                "item1": { gulp_inject: "file1.html" },
                "item2": { gulp_inject: "file2.html" }
            }
        }

        getItem(key: string){
            return this.items[key].trim();
        }
    }
}

gulp-inject做的是用包含文件内容的字符串替换{ gulp_inject: "x.html" }。这就是为什么我希望IGulpInjectable扩展string：因此TypeScript会理解像trim()这样的方法。

但是，extends string无效。 extends String也不是。string。至少，不是我当前的构造函数代码，我不想改变它。

如何告诉TypeScript我的界面具有getItem(key: string){ return (<any> this.items[key]).trim(); }所有的方法？

脚注，我目前的解决方法：

validate

但这并不令人满意。

Answer 1

以下代码在typescript playground中运行良好：

interface IGulpInjectable extends String 
{ 
    gulp_inject: string;
}

class Cache 
{
    private items: { [key: string] : IGulpInjectable };


    constructor() 
    {

        let item1 = new String("   123   ");
        item1["gulp_inject"] = "file1.html";

        let item2 = new String("   4556  ");
        item2["gulp_inject"] = "file2.html";

        this.items = {
            "item1": <IGulpInjectable>item1,
            "item2": <IGulpInjectable>item2
        }
    }

    getItem(key: string)
    {
        return this.items[key];
    }
}

let c = new Cache();
let i = c.getItem("item1");
console.log(i.trim()); //output '123'
console.log(i.gulp_inject); //output 'file1.html'

链接：typescript playground

希望这有帮助。

Answer 2

尝试更改为：

interface String extends String{
    [gulp_inject: string] : string;
}

具有接口扩展字符串功能

2 个答案: