在打字稿中构建具有属性的功能对象

Question

我想创建一个函数对象，该对象还具有一些属性。例如，在JavaScript中，我会做：

var f = function() { }
f.someValue = 3;

现在，在打字稿中，我可以将其描述为：

var f: { (): any; someValue: number; };

但是我实际上不能构建它，而不需要铸造。诸如：

var f: { (): any; someValue: number; } =
    <{ (): any; someValue: number; }>(
        function() { }
    );
f.someValue = 3;

您如何在没有演员的情况下构建它？

Answer 1

使用 object.assign（target，source）

示例：

魔术是 object.assign＆lt; t， u＆gt;（t：t，u：u）键入以返回 Intersection t＆amp; u 。

强制将其解决到已知接口也是直接的。例如：

interface Foo {
  (a: number, b: string): string[];
  foo: string;
}

let method: Foo = Object.assign(
  (a: number, b: string) => { return a * a; },
  { foo: 10 }
); 

由于不兼容的打字而引起的哪些错误：

错误：foo：数字不可分配给foo：字符串
错误：数字不可分配给字符串[]（返回类型）

caveat：您可能需要 polyfill object.sign如果针对较旧的浏览器。

Answer 2

更新：此答案是较早版本的打字稿中的最佳解决方案，但是较新版本中有更好的选项（请参阅其他答案）。

公认的答案有效，在某些情况下可能需要，但没有提供任何类型的安全性来构建对象的缺点。如果您尝试添加未定义的属性，此技术至少会丢弃类型错误。

interface F { (): any; someValue: number; }

var f = <F>function () { }
f.someValue = 3

// type error
f.notDeclard = 3

Answer 3

Typescript旨在通过 声明合并 a>：

您可能还熟悉创建功能的JavaScript练习，然后通过将属性添加到功能中进一步扩展功能。 Typescript使用声明合并以类型安全的方式构建这样的定义。

声明合并的声明让我们说某物既是功能又是一个名称空间（内部模块）：

function f() { }
namespace f {
    export var someValue = 3;
}

这可以保留键入，并让我们同时编写 f（） 和 f.somevalue 。在编写 .d.t.ts 为现有JavaScript代码的文件时，请使用 neclare ：

declare function f(): void;
declare namespace f {
    export var someValue: number;
}

将属性添加到功能中通常是一个令人困惑或意外的模式，因此请避免它，但是，使用或转换较旧的JS代码时可能有必要。这是将内部模块（名称空间）与外部混合的唯一时间之一。

Answer 4

因此，如果要求只需简单地将该函数构建并分配给“ f”，而无需演员，则可能是一个可能的解决方案：

var f: { (): any; someValue: number; };

f = (() => {
    var _f : any = function () { };
    _f.someValue = 3;
    return _f;
})();

本质上，它使用自我执行函数字面来“构造”一个​​对象，该对象将在分配为之前匹配该签名完毕。唯一的怪异是，该函数的内部声明必须为“任何”类型，否则编译器您要分配给对象上不存在的属性。

编辑：稍微简化了代码。

Answer 5

旧问题，但是对于以3.1开头的打字稿版本，只要您使用函数声明或 const 关键字，您就可以像在普通js中一样进行属性分配：

function f () {}
f.someValue = 3; // fine
const g = function () {};
g.someValue = 3; // also fine
var h = function () {};
h.someValue = 3; // Error: "Property 'someValue' does not exist on type '() => void'"

< a href =“ https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html#properties-declaraties-on-functions” rel =“ noreferrer”> 在线示例。

Answer 6

作为快捷方式，您可以使用['属性']访问者动态分配对象值：

var f = function() { }
f['someValue'] = 3;

这绕过类型检查。但是，这是非常安全的，因为您必须以相同的方式故意访问该属性：

var val = f.someValue; // This won't work
var val = f['someValue']; // Yeah, I meant to do that

但是，如果您真的希望使用该类型检查属性值，则这将无法使用。

Answer 7

我不能说这很简单，但绝对有可能：

interface Optional {
  <T>(value?: T): OptionalMonad<T>;
  empty(): OptionalMonad<any>;
}

const Optional = (<T>(value?: T) => OptionalCreator(value)) as Optional;
Optional.empty = () => OptionalCreator();

如果您感到好奇可选

Answer 8

一个更新的答案：由于通过＆amp; 添加了相交类型，因此可以随时“合并”两种推断类型。

这是一个通用的助手，它从中读取某些对象的属性，然后将它们通过对象将其复制到上。它将同一对象返回到

function merge<T1, T2>(onto: T1, from: T2): T1 & T2 {
    Object.keys(from).forEach(key => onto[key] = from[key]);
    return onto as T1 & T2;
}

上设计安全。使用该辅助器，我们有一个操作员，可以使用该操作员使用全类型安全来解决OP的问题：

interface Foo {
    (message: string): void;
    bar(count: number): void;
}

const foo: Foo = merge(
    (message: string) => console.log(`message is ${message}`), {
        bar(count: number) {
            console.log(`bar was passed ${count}`)
        }
    }
);

单击此处在打字稿游乐场中尝试一下。请注意，我们已将 foo 限制为类型 foo ，因此 Merge 的结果必须是完整的 foo 。因此，如果您将 bar 重命名为 bad ，则会获得类型错误。

nb 但是，这里仍然有一个类型的孔。 Typescript不能提供将类型参数限制为“不是函数”的方法。因此，您可能会感到困惑，并将您的函数作为第二个参数将其传递给 Merge ，这是行不通的。因此，直到可以宣布这一点，我们必须在运行时抓住它：

function merge<T1, T2>(onto: T1, from: T2): T1 & T2 {
    if (typeof from !== "object" || from instanceof Array) {
        throw new Error("merge: 'from' must be an ordinary object");
    }
    Object.keys(from).forEach(key => onto[key] = from[key]);
    return onto as T1 & T2;
}

Answer 9

这与强大的打字相反，但是如果您想像我发现这个问题时那样，您可以

var f: any = function() { }
f.someValue = 3;

像我那样绕过压迫性强的打字。可悲的是，这是一个案例打字稿在完全有效的JavaScript上失败，因此您必须告诉Typescript退缩。

“您的javaScript是完全有效的打字稿”评估为false。 （注意：使用0.95）