TypeScript环境下Ember应用注入Service报错，如何正确注入？

嘿，我刚好碰到过类似的问题，你的问题根源在于服务注入的TypeScript类型标注写错了，让我给你拆解一下：

错误原因分析 #

你在组件里把contactPicker标注成了Computed<ContactPicker>，但Ember的service()装饰器返回的并不是计算属性（ComputedProperty），而是直接注入的服务实例。TypeScript因此误以为contactPicker是计算属性类型，而计算属性上根本没有findAllContacts方法，所以才会抛出Property 'findAllContacts' does not exist on type 'ComputedProperty'的错误。

正确的注入写法 #

你只需要把组件里的服务注入代码改成下面这样就行：

import Component from '@ember/component';
import ContactPicker from '../services/contact-picker';
import { inject as service } from '@ember/service';

export default class PhonebookView extends Component {
  // 用@service装饰器 + declare来明确服务类型
  @service('contact-picker') declare contactPicker: ContactPicker;

  didInsertElement() {
    // 现在可以正常调用服务方法啦
    let contacts = this.contactPicker.findAllContacts();
  }
};

补充说明 #

• @service('contact-picker')装饰器负责把对应的服务实例注入到组件中；
• declare关键字是告诉TypeScript：这个属性会在运行时由Ember的装饰器注入，不需要我们在类里手动初始化；
• 你之前写的服务代码（包括扩展Service和声明Registry的部分）是没问题的，不用修改。

这样改完之后，TypeScript就能正确识别contactPicker是ContactPicker服务的实例，自然就能找到findAllContacts方法了。

内容的提问来源于stack exchange，提问作者DESTINY 〆