TypeScript component.extend函數代碼示例

export default Component.extend({
  classNames: ['dataset-comments'],

  /**
   * Mapping of available dataset stream action
   * @type {StringUnionKeyToValue<DatasetStreamActionsUnion>}
   */
  streamActions: StreamActions,

  /**
   * Comments on the parent dataset
   * @type Array<IDatasetComment>
   */
  comments: [],

  /**
   * List of available comment types
   * @type ReadonlyArray<CommentTypeUnion>
   */
  commentTypes: CommentTypes,

  /**
   * Default no-op function to add a dataset comment
   * @type {Function}
   */
  addDatasetComment: noop,

  /**
   * Default no-op function to delete a dataset comment
   * @type {Function}
   */
  deleteDatasetComment: noop,

  /**
   * Default no-op function to update a dataset comment
   * @type {Function}
   */
  updateDatasetComment: noop,

  actions: {
    /**
     * Handles the action for adding | modifying | destroying a dataset comment
     * invokes handler passed in from parent: controller
     * @return {Promise<boolean>}
     */
    handleStreamAction(strategy: DatasetStreamActionsUnion): Promise<boolean> {
      const [, ...args] = [...Array.from(arguments)];

      // assert that handler is in CommentAction needed since we are calling from component template
      // TS currently has no jurisdiction there
      assert(`Expected action to be one of ${Object.keys(StreamActions)}`, strategy in StreamActions);

      return {
        add: (): Promise<boolean> => this.addDatasetComment(...args),
        destroy: (): Promise<boolean> => this.deleteDatasetComment(...args),
        modify: (): Promise<boolean> => this.updateDatasetComment(...args)
      }[strategy]();
    }
  }
});

import Component from '@ember/component';
import { EKMixin, keyDown, keyPress, keyUp, EKOnInsertMixin } from 'ember-keyboard';

const KeyboardAwareComponent = Component.extend(EKMixin, EKOnInsertMixin, {
  keyboardFirstResponder: true,
});

export default class KeyboardPress extends KeyboardAwareComponent {
  key!: string;
  onDown?: () => void;
  onPress?: () => void;
  onUp?: () => void;

  didInsertElement() {
    this._super(...arguments);

    const { key, onDown, onPress, onUp } = this;

    if (onDown) {
      this.on(keyDown(key), this.eventHandler(onDown));
    }

    if (onPress) {
      this.on(keyPress(key), this.eventHandler(onPress));
    }

    if (onUp) {
      this.on(keyUp(key), this.eventHandler(onUp));
    }
  }

import Component from '@ember/component';
import layout from 'ember-oembed/templates/components/ember-oembed-content';

export default Component.extend({
  layout
});

    min: Ember.computed.min('foo'),
    none: Ember.computed.none('foo'),
    not: Ember.computed.not('foo'),
    notEmpty: Ember.computed.notEmpty('foo'),
    oneWay: Ember.computed.oneWay('foo'),
    or: Ember.computed.or('foo', 'bar', 'baz', 'qux'),
    readOnly: Ember.computed.readOnly('foo'),
    reads: Ember.computed.reads('foo'),
    setDiff: Ember.computed.setDiff('foo', 'bar'),
    sort1: Ember.computed.sort('foo', 'bar'),
    sort2: Ember.computed.sort('foo', (itemA, itemB) => {
        if (itemA < itemB) {
            return -1;
        } else if (itemA > itemB) {
            return 1;
        } else {
            return 0;
        }
    }),
    sum: Ember.computed.sum('foo'),
    union: Ember.computed.union('foo', 'bar', 'baz', 'qux'),
    uniq: Ember.computed.uniq('foo'),
    uniqBy: Ember.computed.uniqBy('foo', 'bar')
});

const component2 = Component.extend({
    isAnimal: or('isDog', 'isCat')
}).create();

assertType<boolean>(component2.get('isAnimal'));

export default Component.extend({
  tagName: 'ul',

  classNames: ['comment-stream'],

  /**
   * Mapping of available comment action
   * @type {StringUnionKeyToValue<StreamCommentActionsUnion>}
   */
  commentActions: CommentActions,

  /**
   * Default no-op function to add a comment
   * @type {Function}
   */
  addCommentToStream: noop,

  /**
   * Default no-op function to delete a comment
   * @type {Function}
   */
  deleteCommentFromStream: noop,

  /**
   * Default no-op function to update a comment
   * @type {Function}
   */
  updateCommentInStream: noop,

  actions: {
    /**
     * Async handles CrUD operations for comment stream actions, proxies to parent closure actions
     * @param {StreamCommentActionsUnion} strategy
     * @return {Promise<boolean>}
     */
    async handleStreamComment(strategy: StreamCommentActionsUnion): Promise<boolean> {
      const [, ...args] = arguments;

      // assert that handler is in CommentAction needed since we are calling from component template
      // TS currently has no jurisdiction there
      assert(`Expected action to be one of ${Object.keys(CommentActions)}`, strategy in CommentActions);

      return {
        create: (): Promise<boolean> => this.addCommentToStream(...args),
        destroy: (): Promise<boolean> => this.deleteCommentFromStream(...args),
        update: (): Promise<boolean> => this.updateCommentInStream(...args)
      }[strategy]();
    }
  }
});

import Component from '@ember/component';
import Object, { computed, get } from '@ember/object';
import hbs from 'htmlbars-inline-precompile';
import { assertType } from "./lib/assert";

Component.extend({
  layout: hbs`
        <div>
          {{yield}}
        </div>
    `,
});

Component.extend({
  layout: 'my-layout',
});

const MyComponent = Component.extend();
assertType<string | string[]>(get(MyComponent, 'positionalParams'));

const component1 = Component.extend({
  actions: {
    hello(name: string) {
      console.log('Hello', name);
    },
  },
});

Component.extend({
  name: '',
  hello(name: string) {