ember_cli_typescript_component_with_tracked_state.ts

1// 1. Install the CLI and create a new app (Terminal commands):
2// npm install -g ember-cli
3// ember new my-app --typescript
4
5// 2. Example of a TypeScript-backed component:
6// app/components/hello-world.ts
7import Component from '@glimmer/component';
8import { tracked } from '@glimmer/tracking';
9import { action } from '@ember/object';
10
11interface HelloWorldArgs {
12  greeting: string;
13}
14
15export default class HelloWorld extends Component<HelloWorldArgs> {
16  @tracked count = 0;
17
18  get fullGreeting(): string {
19    return `${this.args.greeting || 'Hello'}, you have clicked ${this.count} times.`;
20  }
21
22  @action
23  increment(): void {
24    this.count += 1;
25  }
26}