2019-06-25に更新

TypeScriptでA-Frameのコンポーネントを書く

TypeScriptを使っているプロジェクトでA-Frameのコンポーネントを書く時の方法。まだざっと試したところなのでおかしなところがあれば適宜調整が必要かも。

とりあえず型を入れる。

yarn add @types/aframe

これで適当なtsファイル内でAFRAME.registerComponentとかを実行しても未定義エラー等が発生しなくなるため定義できるようになる。

また、下記のようにimportして実行する方法もある。

import { registerComponent } from 'aframe'

registerComponent('my-component', {

コンポーネント内部で使うパラメータはオブジェクト内に定義すればいい。JavaScriptの場合だと、initメソッド内で初期化したりするが、それだと型エラーになるので要定義。

registerComponent('my-component', {
  hoge: true,
  fuga: 100,

というか、型定義のテストファイルに一通りのものが書かれている。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/aframe/test/aframe-tests.ts

const Component = registerComponent('test-component', {
    schema: {
        myProperty: {
            default: [],
            parse() {
                return [true];
            }
        },
        string: { type: 'string' },
        num: 0
    },
    init() {
        this.data.num = 0;
        this.el.setAttribute('custom-attribute', 'custom-value');
    },
    update() {},
    tick() {},
    remove() {},
    pause() {},
    play() {},

    multiply(f: number) {
        // Reference to system because both were registered with the same name.
        return f * this.data.num * this.system!.data.counter;
    }
});

他にも色々書かれているのでこちらを参考にしていけばなんとかなるのではないかと思う。

プロパティの型を明示的に指定する場合は?

事前にinterfaceを定義する感じ? ただこれだとメソッドも再定義しないといけないので非常に面倒。何か良い方法は無いのだろうか。


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント