Ember与TypeScript #

ember install ember-cli-typescript
npm install --save-dev @types/ember

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": true,
    "experimentalDecorators": true
  },
  "include": ["app/**/*", "tests/**/*"]
}

// app/components/user-card.ts
import Component from '@glimmer/component';

interface UserCardSignature {
  Args: {
    user: User;
    size?: 'small' | 'medium' | 'large';
    onEdit?: (user: User) => void;
  };
  Blocks: {
    default: [user: User];
  };
  Element: HTMLDivElement;
}

export default class UserCardComponent extends Component<UserCardSignature> {
  get cardClass(): string {
    return `card card-${this.args.size || 'medium'}`;
  }
}

// app/models/post.ts
import Model, { attr, belongsTo, hasMany } from '@ember-data/model';

export default class PostModel extends Model {
  @attr('string') declare title: string;
  @attr('string') declare body: string;
  @attr('date') declare createdAt: Date;
  @belongsTo('user') declare author: User;
  @hasMany('comment') declare comments: Comment[];
}

// app/services/session.ts
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

interface User {
  id: string;
  name: string;
  email: string;
}

export default class SessionService extends Service {
  @tracked isAuthenticated = false;
  @tracked currentUser: User | null = null;

  async login(email: string, password: string): Promise<User> {
    // ...
  }
}

// types/global.d.ts
declare module 'my-app/services/session' {
  import Service from '@ember/service';
  export default class SessionService extends Service {
    isAuthenticated: boolean;
    currentUser: User | null;
  }
}