将 AngularJS 对象作为 TypeScript 类注入（缺少方法）

Posted 2023-03-13

【中文标题】将 AngularJS 对象作为 TypeScript 类注入（缺少方法）

【英文标题】：Inject AngularJS object as TypeScript class (methods missing)

【发布时间】：2015-03-26 16:27:33

【问题描述】：

Angular 从服务中获取一些 JSON 作为路由解析的一部分。

JSON 作为 Angular-ish 反序列化对象注入到控制器中。

对象的属性与提供的 TypeScript 类对齐，所以例如vm.foo.displayName 成功显示在 html 页面上。

但是我认为TypeScript类中定义的方法无处可寻，所以当我尝试调用vm.foo.run()时，控制台打印错误：TypeError: Object doesn't support property or method 'run '

module app.Samples 

    export class Foo 
        public typeName: string;
        public displayName: string;

        public run(): void 
            alert("Running!");
        
    


module app.Samples 

     interface IFoobarScope 
         foo: Foo;
     

     class FoobarController implements IFoobarScope 
         foo: Foo;

         static $inject = ['foo'];
         constructor(foo: Foo) 
             var vm = this;
             vm.foo = foo;
             vm.foo.run();
         
     

     angular
         .module('app.Samples')
         .controller('app.Samples.FoobarController', FoobarController);
 

【参考方案1】：

是的，就 AngularJS 而言，它只是将任何旧对象传递给您的控制器函数。 TypeScript 为您的代码中的 Foo 类提供了语法糖，但如果对象没有 run() 方法，它不会给它一个方法。

您可以为您的 Foo 类型创建一个复制构造函数：

constructor(foo?: Foo) 
    if(foo) 
        this.typeName = foo.typeName;
        this.displayName = foo.displayName;
    

然后在您的控制器中执行此操作：

constructor(foo: Foo) 
    var vm = this;
    vm.foo = new Foo(foo);
    vm.foo.run();

或者，您可以跳过复制构造方法并使用angular.extend()：

constructor(foo: Foo) 
    var vm = this;
    vm.foo = new Foo();
    angular.extend(vm.foo, foo);
    vm.foo.run();

【讨论】：

这就是我的怀疑，但您的解决方案/您所说的方式使灯泡熄灭。无需手动将注入的对象反射到构造的对象。如果您可以从vm.foo = new Foo(foo); 编辑到vm.foo = new Foo(); angular.extend(vm.foo, foo);，我会标记为答案 :-)

很好的 angular.extend 和/或 angular.copy 概要：***.com/questions/16797659/…

@RJB 我最初发布的方法可能有一些优点，所以我编辑了我的答案以另外包含您的建议。