TypeScript+Ember计算属性正确写法及@computed报错解决

我来帮你搞定这个Ember+TypeScript计算属性的坑！

首先得明确：你最开始的第一种写法本身就不符合Ember计算属性的设计——@computed装饰器是用来修饰**访问器（get/set函数）**的，不是普通的带参数方法，所以TypeScript肯定会拦你，这是方向上的问题。

再看你尝试的第二种写法，报错提示“不是原生访问器函数”，根源出在你给getter加了this: CertificateCard的显式类型注解上。TypeScript在处理带this参数的getter时，会把它转换成一个非原生的函数结构，导致Ember的@computed装饰器无法识别这是一个合法的访问器，所以抛出了断言错误。

正确的写法有两种，根据你的Ember版本选择： #

1. 继续使用@computed（兼容旧版Ember）

去掉getter里的this参数注解，TypeScript会自动从类上下文推断this的类型。同时记得给组件的依赖属性声明类型，让TypeScript检查更准确：

import Component from '@ember/component';
import { computed } from '@ember/object';

export default class CertificateCard extends Component {
  // 先声明依赖属性的类型（!表示非空断言，如果你能确保属性会被赋值）
  styleNamespace!: string;
  status!: string;

  @computed('styleNamespace', 'status')
  get statusClass(): string {
    // 直接用this访问属性，不需要this.get()（Ember 2.1+支持直接属性访问）
    return `${this.styleNamespace}--${this.status}`;
  }
}

2. 推荐使用@tracked（Ember 3.16+）

现代Ember更推荐用@tracked装饰器替代@computed，写法更简洁，TypeScript支持也更友好，不需要手动指定依赖键：

import Component from '@ember/component';
import { tracked } from '@glimmer/tracking';

export default class CertificateCard extends Component {
  @tracked styleNamespace!: string;
  @tracked status!: string;

  // 不需要装饰器，直接写getter，@tracked会自动追踪依赖变化
  get statusClass(): string {
    return `${this.styleNamespace}--${this.status}`;
  }
}

额外检查项 #

确保你的项目配置正确：

• 安装了ember-cli-typescript插件
• tsconfig.json中启用了experimentalDecorators和emitDecoratorMetadata选项
• 使用的Ember版本支持对应的装饰器语法（@computed装饰器需要Ember 3.1+，@tracked需要3.16+）

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