Dynamic Typescript动态属性和方法

我正在努力学习更多关于打字脚本的知识

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

例如（仅举一个例子）：

}

window.onload=函数（）{

}

在VisualStudio中，intellisense可以识别函数的返回值，并允许您使用参数和函数

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

在第二个图像中有“fn2（）”而不是“prop1”和“fn1（）”

你可以用typescript做类似的事情吗？怎么做

其思想是让一个或多个函数返回对象，这些对象的属性和方法是根据传递给函数的参数动态添加的，并且可以从VisualStudioIntelliSense中看到

谢谢

---

Luca

TypeScript接口可以有可选的成员。e、 g:

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;
}

---

TypeScript接口可以有可选的成员。e、 g:

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;
}

是为这个用例设计的，但是在我的测试中，我只能让它使用字符串，而不能使用数字

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

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'.

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

是为这个用例设计的，但是在我的测试中，我只能让它使用字符串，而不能使用数字

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

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'.

---

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

谢谢你的回复。如果我写：fn（1）visual studio intellisense使用“fn”LucaTry将fn（1）的结果保存到一个变量，并查看intellisense是否恢复活动状态，这看起来不会让人感到不舒服。谢谢Alex。没错。如果我使用1 like参数调用fn，我会看到所有属性和所有方法（prop1、fn1和fn2），它可能会有一个函数，返回一个在运行时动态添加属性和方法的对象，而不是一个包含所有属性和方法的接口？@basarat basarat感谢这个例子。即使在本例中，我们也需要使用所有可能的属性和方法定义一个对象，即使它们没有被使用。如果我称之为fn（1），请参见“fn2”。在javascript中，可以在运行时添加。问题是：是否有可能像在javascript中一样，在运行时添加属性或方法，而不使用接口，也不必声明对象中的所有属性/方法（即使将使用它）？如果我称之为fn（1），请仅查看“prop1”和“fn1”；如果我称之为fn（2），请仅查看“fn2”？非常感谢。卢卡（抱歉用英语）@LucaDev，你担心只看到合适的成员是我在回答中提到的问题。（遗憾的是，它只支持字符串参数。）感谢您的回复。如果我写：fn（1）visual studio intellisense使用“fn”LucaTry将fn（1）的结果保存到一个变量，并查看intellisense是否恢复活动状态，这看起来不会让人感到不舒服。谢谢Alex。没错。如果我使用1 like参数调用fn，我会看到所有属性和所有方法（prop1、fn1和fn2），它可能会有一个函数，返回一个在运行时动态添加属性和方法的对象，而不是一个包含所有属性和方法的接口？@basarat basarat感谢这个例子。即使在本例中，我们也需要使用所有可能的属性和方法定义一个对象，即使它们没有被使用。如果我称之为fn（1），请参见“fn2”。在javascript中，可以在运行时添加。问题是：是否有可能像在javascript中一样，在运行时添加属性或方法，而不使用接口，也不必声明对象中的所有属性/方法（即使将使用它）？如果我称之为fn（1），请仅查看“prop1”和“fn1”；如果我称之为fn（2），请仅查看“fn2”？非常感谢。卢卡（抱歉用英语）@LucaDev，你担心只看到合适的成员是我在回答中提到的问题。（遗憾的是，它只支持字符串参数。）感谢Tom的回复。您的示例与basarat的示例类似，基于接口，但仅适用于字符串类型的参数。无法编写函数，返回在运行时以Javascript形式添加属性和方法的对象（无接口）使用返回值是一个限制。“从JavaScript开始，以JavaScript结束”，但它与JavaScript不一样。我不是JavaScript或typescript方面的专家，所以我的观点是谦虚的。我希望你能纠正我，并告诉我我做错了什么。感谢并抱歉“糟糕的英语”。Lucastis与basarat的示例不同。注意不同参数值的不同返回类型。遗憾的是，是的，这只是针对字符串。感谢Tom的回复。您的示例与basarat的示例类似，基于接口，但仅适用于字符串类型的参数。无法编写函数，返回在运行时以Javascript形式添加属性和方法的对象（无接口）使用返回值是一个限制。“从JavaScript开始，以JavaScript结束”，但它与JavaScript不一样。我不是JavaScript或typescript方面的专家，所以我的观点是谦虚的。我希望你能纠正我，并告诉我我做错了什么。感谢并抱歉“糟糕的英语”。Lucastis与basarat的示例不同。注意不同参数值的不同返回类型。可悲的是，是的，这只是字符串。