Typescript动态属性和方法

Question

我正在尝试更多地了解打字稿。

在javascript中，您可以编写一个函数，该函数返回一个动态添加属性和方法的对象。

例如（仅举例）：

function fn(val) {
    var ret = {};

    if (val == 1) {
        ret.prop1 = "stackoverflow";
        ret.fn1 = function () {
            alert("hello stackoverflow");
        }
    }

    if (val == 2) {
        ret.fn2 = function () {
            alert("val=2");
        }
    }

    return ret;

}

window.onload = function（）{

    alert(fn(1).prop1); //alert "stackoverflow"
    fn(1).fn1(); //alert "hello stackoverflow"

    fn(2).fn2(); //alert "val=2"

}

在visual studio中，intellisense识别函数的返回值，并允许您使用参数和函数。

在第一张图片中有“prop1”和“fn1（）”而不是“fn2（）”

在第二张图片中有“fn2（）”而不是“prop1”和“fn1（）”。

你可以用打字稿做类似的事吗？怎么样？

我们的想法是让一个或多个函数返回具有属性和方法的对象，这些属性和方法是根据传递给函数的参数动态添加的，并且可以从visual studio intellisense中看到。

感谢

卢卡

Answer 1

TypeScript接口可以包含可选成员。例如：

interface Foo{
    prop1?:string;
    fn1?:Function;
    fn2?:Function;
}
function fn(val):Foo {
    var ret:Foo = {};

    if (val == 1) {
        ret.prop1 = "stackoverflow";
        ret.fn1 = function () {
            alert("hello stackoverflow");
        }
    }

    if (val == 2) {
        ret.fn2 = function () {
            alert("val=2");
        }
    }

    return ret;
}

您无需创建显式界面。你可以内联：

function fn(val) {
    var ret:{
        prop1?:string;
        fn1?:Function;
        fn2?:Function;
    }= {};

    if (val == 1) {
        ret.prop1 = "stackoverflow";
        ret.fn1 = function () {
            alert("hello stackoverflow");
        }
    }

    if (val == 2) {
        ret.fn2 = function () {
            alert("val=2");
        }
    }

    return ret;
}

Answer 2

Overload on constants (scroll down here)是针对此用例而设计的，但在我的测试中，我只能使用字符串而不是数字。

以下是您示例中的变体（使用字符串）：

interface Type1 {
  fn1(): void;
  prop1: string;
}

interface Type2 {
  fn2(): void;
}

function fn(val: string): Object;
function fn(val: "1"): Type1;
function fn(val: "2"): Type2;
function fn(val: string): Object {
  var ret: any = {};
  if (val == "1") {
    ret.prop1 = "stackoverflow";
    ret.fn1 = function () {
      alert("hello stackoverflow");
    }
  }
  if (val == "2") {
    ret.fn2 = function () {
      alert("val=2");
    }
  }
  return ret;
}

console.log(fn("1").fn1);
console.log(fn("1").prop1);
console.log(fn("2").fn2);
// Bad: console.log(fn("2").fn1);
// Error: The property 'fn1' does not exist on value of type 'Type2'.

在快速搜索中，我找不到有关此功能的数字讨论。字符串可能是更常见的用例，但我可以看到数字有时会派上用场。如果我很棒，我会raise an issue here。