1

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

在 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 = 函数（）{

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

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

}

在 Visual Studio 中，智能感知识别函数的返回值并允许您使用参数和函数。

在此处输入图像描述

在此处输入图像描述

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

在第二张图片中，有“fn2 ()”而不是“prop1”和“fn1 ()”。

你可以用打字稿做类似的事情吗？如何？

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

谢谢

卢卡

4

2 回答 2

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;
}
于 2013-10-08T09:49:09.710 回答
0

常量重载（在此处向下滚动）是为此用例设计的，但在我的测试中，我只能让它与字符串而不是数字一起工作。

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

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

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

于 2013-10-08T13:45:40.713 回答